Home
Basic Knowledge
Fix Computer
Windows 10
Windows 11
Artificial Intelligence
Space Science
Strange story
A compilation of exercises on Bootstrap 5.
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)
You've just finished reading the article "A compilation of exercises on Bootstrap 5." edited by the TipsMake team. You can save a-collection-of-bootstrap-exercises-muwtw.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.
Jessica Tanner