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.

Primary Class

.table

Common Use Cases

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

Variants & Classes

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

Code Example

<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>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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.