Bootstrap 5Content

Bootstrap 5 Table

Bootstrap 5 provides extensive table styling via opt-in classes applied to standard HTML table elements. Available modifiers include striped rows, bordered cells, hoverable rows, small/condensed sizing, dark theme, and responsive overflow wrappers.

Bootstrap class

.table

Common use cases

Feature comparison tables
Pricing plan comparison
Data lists with sorting
Financial/reporting tables
Bootstrap class reference tables

Variants and classes

Variant	Description and classes	Classes
Basic table	Clean table with light header styling.`table`	`table`
Striped table	Alternating row colours for readability.`table table-striped`	`table table-striped`
Bordered table	Borders on all cells.`table table-bordered`	`table table-bordered`
Hover table	Row highlights on hover.`table table-hover`	`table table-hover`
Dark table	Dark background with white text.`table table-dark`	`table table-dark`
Responsive table	Horizontal scroll on small screens.`table-responsive + table`	`table-responsive + table`

Code example

HTML

<div class="table-responsive">
  <table class="table table-hover align-middle">
    <thead class="table-dark">
      <tr>
        <th scope="col">Feature</th>
        <th scope="col" class="text-center">Free</th>
        <th scope="col" class="text-center">Pro</th>
        <th scope="col" class="text-center">Agency</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Full page generation</td>
        <td class="text-center text-success fw-bold">✓</td>
        <td class="text-center text-success fw-bold">✓</td>
        <td class="text-center text-success fw-bold">✓</td>
      </tr>
      <tr>
        <td>Edit mode</td>
        <td class="text-center text-muted">✕</td>
        <td class="text-center text-success fw-bold">✓</td>
        <td class="text-center text-success fw-bold">✓</td>
      </tr>
      <tr>
        <td>Priority support</td>
        <td class="text-center text-muted">✕</td>
        <td class="text-center text-muted">✕</td>
        <td class="text-center text-success fw-bold">✓</td>
      </tr>
    </tbody>
  </table>
</div>

Live examples

Striped Feature Comparison

Pricing/feature comparison table with striped rows and checkmark indicators.

Example 1

Hoverable Data Table

Clean data table with hover effect and status badges.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Feature comparison table with icons
Pricing plan feature matrix
Stats table with colour-coded values
Responsive data table with search
Comparison table with highlighted column

Best practices

Always wrap wide tables in table-responsive

On mobile, wide tables overflow horizontally. Wrapping in a div.table-responsive enables horizontal scrolling and prevents layout breakage.

Use align-middle for vertically centred cell content

By default, table cells align content to the top. Add align-middle to the table element to vertically centre all cell content, essential for tables mixing text and icons.

FAQ

How do I make a Bootstrap 5 table responsive?

Wrap the table in a div with the table-responsive class. On small screens, this creates a horizontally scrollable container rather than forcing the table to break layout.