Bootstrap 5·Bootstrap from grid to dashboard

Typography and tables

Use display headings, text utilities and accessible table variants.

Beginner 12 min read Lesson 3 of 300 Challenge included

What you will be able to do

Use display-1 through display-6 for hero headings.
Use .table, .table-striped and .table-hover.
Wrap wide tables in .table-responsive.
Keep table headers scoped for accessibility.

In plain English

Bootstrap normalises type and tables so data is readable immediately. Use display-* for hero text, text-body-secondary for supporting copy, and table-responsive when a table must scroll on small screens.

table.htmlHTML

<h1 class="display-5">Practice totals</h1>
<div class="table-responsive">
  <table class="table table-striped align-middle">
    <thead><tr><th scope="col">Course</th><th scope="col">Minutes</th></tr></thead>
    <tbody><tr><td>CSS</td><td>18</td></tr></tbody>
  </table>
</div>

Your turn

Style a striped table

Easy

Create a table with a header row, two data rows, striped rows and hover feedback.

HTML · starter

<table class="table">

Check your understanding before moving on.

Knowledge checkQuestion 1

Which wrapper lets a wide table scroll horizontally on small screens?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Forms and validation

Lesson 3 of 300 · 0% of course