You can test your Bootstrap 5 skills with the exercises divided into sections below. Solve the exercises by filling in the missing code. You will receive 1 point for each correct answer.
You can test your Bootstrap 5 skills with the exercises divided into sections below. Solve the exercises by filling in the missing code. You will receive 1 point for each correct answer.
Containers in Bootstrap 5
Lesson 1: Add a Bootstrap class to the element to create a container with a compatible width:
Hello World!
Answer: container
Exercise 2: Add the Bootstrap class to the element to create a full-width container that spans the entire screen width:
Hello World!
Answer: container-fluid
Typography in Bootstrap 5
Exercise 1: Use Bootstrap classes to center the following text:
Hello World!
Answer: text-center
Lesson 2: Using display classes as elements
More prominent than a normal title (larger font size and thinner font thickness):
My Heading
Answer: display-1
Exercise 3: Use a Bootstrap class to capitalize the following text:
Hello World!
Answer: text-uppercase
Colors in Bootstrap 5
Lesson 1: Using contextual classes to color the text of an element.
switch to "orange":
Hello World!
Answer: text-warning
Lesson 2: Using contextual classes to set the background color of an element.
turned light gray:
Hello World!
Answer: bg-light
Images in Bootstrap 5
Lesson 1: Use a Bootstrap class to make an image a circle.
Answer: rounded-circle
Lesson 2: Use a Bootstrap class to add rounded corners to images.
Answer: rounded
Lesson 3: Using Bootstrap classes to arrange images as 'thumbnails'
Answer: img-thumbnail
Lesson 4: Using Bootstrap classes to create responsive images.
Answer: img-fluid
Tables in Bootstrap 5
Lesson 1: Add a class attribute to style the table in a basic Bootstrap table format:
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: class="table"
Exercise 2: Add zebra stripes to the correct positions in this table:
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer:
| John | Doe |
Exercise 3: Add a class that adds borders to all sides of the table and cells:
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: table-bordered
Lesson 4: Add a class to display the mouse cursor state on the rows in the table:
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: table-hover
Lesson 5: Use contextual classes to add the following colors to the rows:
- The first row is green.
- The second row is red.
- The last row is blue.
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: table-success/table-danger/table-primary (in order from top to bottom)
Alerts in Bootstrap 5
Exercise 1: Add a class 'alert' to display the result of a successful task.
Success! Answer: alert alert-success
Exercise 2: Read the following code, then add the appropriate 'alert' class:
This alert box could indicate a successful or positive action. This alert box could indicate a neutral informative change or action. This alert box could indicate a warning that might need attention. This alert box could indicate a dangerous or potentially negative action.
Answer:
- alert alert-success
- alert alert-info
- alert alert-warning
- alert alert-danger
Lesson 3: Add appropriate Bootstrap classes to create closeable messages.
Blah blah blah. Answer: alert-dismissible
Buttons in Bootstrap 5
Lesson 1: Add a Bootstrap class to style the button appropriately as a 'danger' button.
Answer: btn btn-danger
Exercise 2: Add a Bootstrap class to set the size of the first button to 'large' and the last button to 'small'.
Answer:
- btn-lg
- btn-sm
Image in BS5
Lesson 1:
Add the Bootstrap class to the element to create a responsive, fixed-width container:
Answer: container
Lesson 2: Use a Bootstrap class to add rounded corners to images.
Answer: rounded
Lesson 3: Use a Bootstrap class to create images as thumbnails.
Answer: img-thumbnail
Lesson 4: Using Bootstrap classes to create responsive images
Answer: img-fluid
Tables in Bootstrap 5
Lesson 1: Add the `class` attribute to style a table as a basic Bootstrap table:
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: class="table"
Exercise 2: Add zebra stripes to the table.
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: table-striped
Exercise 3: Adding a class will add borders to all edges of the table and cells.
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Answer: table-bordered
(To be continued)