Bootstrap 5 Practice Exercises with Answers

These Bootstrap 5 exercises test whether you can choose the right class for common layout and component tasks. Replace each ___ placeholder, then open the answer section only after you have tried the examples. Each correct exercise is worth one point.

If Bootstrap is not yet connected to your test page, review the basic setup in this guide to popular CSS frameworks and load Bootstrap before checking the rendered results.

Exercise overview

Topic	Exercises
Containers	2
Typography and colors	5
Images	4
Tables	5
Alerts	3
Buttons	2

Bootstrap containers

1. Responsive fixed-width container

Add the class that provides a responsive maximum width at each Bootstrap breakpoint.

<div class="___">
  <p>Hello, world!</p>
</div>

2. Full-width container

Add the class that remains 100% wide at every breakpoint.

<div class="___">
  <p>Hello, world!</p>
</div>

Show container answers

1. container
2. container-fluid

Typography and colors

3. Center text

<p class="___">Centered text</p>

4. Create a display heading

Use the largest display-heading utility.

<h1 class="___">Product launch</h1>

5. Transform text to uppercase

<p class="___">Important notice</p>

6. Apply the warning text color

<p class="___">Check this setting.</p>

7. Apply a light background

<div class="___ p-3">Supporting information</div>

Show typography and color answers

3. text-center
4. display-1
5. text-uppercase
6. text-warning
7. bg-light

Bootstrap image classes

8. Make an image circular

<img class="___" src="portrait.jpg" alt="Team member">

9. Add rounded corners

<img class="___" src="landscape.jpg" alt="Mountain landscape">

10. Use the thumbnail treatment

<img class="___" src="product.jpg" alt="Product preview">

11. Make an image responsive

Add the class that applies max-width: 100% and automatic height.

<img class="___" src="banner.jpg" alt="Event banner">

Show image answers

8. rounded-circle
9. rounded
10. img-thumbnail
11. img-fluid

Bootstrap tables

Use this basic table for the next five exercises:

<table class="___">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Editor</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary Moe</td>
      <td>Designer</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

12. Apply the base table style

Replace the placeholder with the class required by every Bootstrap table.

13. Add striped rows

Use the base class and the striped-row variant together.

14. Add cell borders

Use the base class and the bordered variant together.

15. Highlight rows on hover

Use the base class and the hover variant together.

16. Apply contextual row colors

Add table-success to the first body row and table-danger to the second.

Show table answers

12. table
13. table table-striped
14. table table-bordered
15. table table-hover
16. <tr class="table-success"> and <tr class="table-danger">

Bootstrap alerts

17. Create a success alert

<div class="___" role="alert">
  Your changes were saved.
</div>

18. Match messages to contextual variants

Complete each alert with the most appropriate contextual class.

<div class="alert ___" role="alert">Upload complete.</div>
<div class="alert ___" role="alert">Maintenance begins tonight.</div>
<div class="alert ___" role="alert">Payment failed.</div>

19. Make an alert dismissible

Complete both placeholders. The fade animation is optional, but the dismissible class provides room for the close button.

<div class="alert alert-warning ___ fade show" role="alert">
  Review your account settings.
  <button type="button" class="btn-close"
    ___="alert" aria-label="Close"></button>
</div>

Show alert answers

17. alert alert-success
18. alert-success, alert-warning, and alert-danger
19. alert-dismissible and data-bs-dismiss

Bootstrap buttons

20. Create a danger button

<button class="___" type="button">Delete</button>

21. Change button sizes

<button class="btn btn-primary ___" type="button">Large</button>
<button class="btn btn-primary ___" type="button">Small</button>

Show button answers

20. btn btn-danger
21. btn-lg and btn-sm

Score your work

• 18–21: You can use the covered Bootstrap classes confidently.
• 13–17: Review the sections where you missed a class, then try again without opening the answers.
• 0–12: Practice one topic at a time in a small HTML file before repeating the full set.

When a class does not produce the expected result, first confirm that Bootstrap CSS is loaded. Dismissible alerts also require Bootstrap JavaScript. Use an editor with HTML completion and browser developer tools to catch misspelled class names; this list of free HTML editing tools includes several options.