Bootstrap 5 Table Tutorial — Complete Guide with Examples

Bootstrap 5 tables look clean out of the box and become very polished with a few extra classes. Here's a complete walkthrough of everything the Bootstrap table system offers.

Basic Table

The minimum viable Bootstrap table:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Template</th>
      <th scope="col">Framework</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Marvel Dashboard</td>
      <td>Angular 21</td>
      <td>$29</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>PORTO Template</td>
      <td>Bootstrap 5</td>
      <td>$19</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Proctu Medical</td>
      <td>React 19</td>
      <td>$39</td>
    </tr>
  </tbody>
</table>

scope="col" on <th> in thead and scope="row" on row headers are accessibility attributes — include them.

Table Modifiers

Combine these classes on the <table> element:

<!-- Striped rows -->
<table class="table table-striped">

<!-- Striped columns (Bootstrap 5.1+) -->
<table class="table table-striped-columns">

<!-- Hover effect on rows -->
<table class="table table-hover">

<!-- Bordered (borders on all cells) -->
<table class="table table-bordered">

<!-- Borderless (no borders at all) -->
<table class="table table-borderless">

<!-- Smaller row padding -->
<table class="table table-sm">

<!-- Dark theme -->
<table class="table table-dark">

<!-- Combinations -->
<table class="table table-striped table-hover table-bordered">
<table class="table table-dark table-striped table-hover">

Clean Admin Dashboard Table

The pattern I use most — no outer border, shadow on the card, dark header:

<div class="card border-0 shadow-sm">
  <div class="card-header bg-white d-flex align-items-center justify-content-between py-3 px-4">
    <h6 class="fw-bold mb-0">Recent Templates</h6>
    <a href="https://lettstartdesign.com"
      class="btn btn-sm text-white px-3" style="background:#fd4766;">
      View All
    </a>
  </div>
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th class="px-4 py-3 small fw-semibold text-muted border-0">Template</th>
          <th class="py-3 small fw-semibold text-muted border-0">Framework</th>
          <th class="py-3 small fw-semibold text-muted border-0">Price</th>
          <th class="py-3 small fw-semibold text-muted border-0">Sales</th>
          <th class="py-3 small fw-semibold text-muted border-0">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="px-4 py-3 fw-semibold">Marvel Dashboard</td>
          <td class="py-3"><span class="badge bg-danger">Angular</span></td>
          <td class="py-3 fw-bold" style="color:#fd4766;">$29</td>
          <td class="py-3 text-muted">1,240</td>
          <td class="py-3">
            <span class="badge bg-success bg-opacity-10 text-success">Active</span>
          </td>
        </tr>
        <tr>
          <td class="px-4 py-3 fw-semibold">PORTO Template</td>
          <td class="py-3"><span class="badge bg-primary">Bootstrap</span></td>
          <td class="py-3 fw-bold" style="color:#fd4766;">$19</td>
          <td class="py-3 text-muted">3,580</td>
          <td class="py-3">
            <span class="badge bg-success bg-opacity-10 text-success">Active</span>
          </td>
        </tr>
        <tr>
          <td class="px-4 py-3 fw-semibold">Proctu Medical</td>
          <td class="py-3"><span class="badge bg-info text-dark">React</span></td>
          <td class="py-3 fw-bold" style="color:#fd4766;">$39</td>
          <td class="py-3 text-muted">890</td>
          <td class="py-3">
            <span class="badge bg-warning bg-opacity-10 text-warning">Draft</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

align-middle vertically centers all cell content. mb-0 removes the default bottom margin on the table (which would create a gap inside the card).

Row Color Variants

Colour individual rows with contextual classes:

<tbody>
  <tr class="table-primary"><td>Primary row</td></tr>
  <tr class="table-secondary"><td>Secondary row</td></tr>
  <tr class="table-success"><td>Success — completed order</td></tr>
  <tr class="table-danger"><td>Danger — failed/error</td></tr>
  <tr class="table-warning"><td>Warning — pending</td></tr>
  <tr class="table-info"><td>Info — in progress</td></tr>
  <tr class="table-light"><td>Light row</td></tr>
  <tr class="table-dark"><td>Dark row</td></tr>
</tbody>

Also works on <td> and <th> to colour individual cells.

Responsive Table

Adds horizontal scroll when the table is too wide for the viewport:

<div class="table-responsive">
  <table class="table">
    <!-- Wide table content -->
  </table>
</div>

<!-- Only responsive below specific breakpoints -->
<div class="table-responsive-sm">  <!-- scrolls below 576px -->
<div class="table-responsive-md">  <!-- scrolls below 768px -->
<div class="table-responsive-lg">  <!-- scrolls below 992px -->

Table Caption

<table class="table">
  <caption>List of templates sold this month</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<!-- Caption at top -->
<table class="table caption-top">
  <caption>Sales summary — June 2026</caption>
  ...
</table>

Table with Action Buttons

<table class="table table-hover align-middle">
  <thead class="table-light">
    <tr>
      <th>Template</th>
      <th>Price</th>
      <th class="text-end">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fw-semibold">Marvel Dashboard</td>
      <td style="color:#fd4766;" class="fw-bold">$29</td>
      <td class="text-end">
        <div class="d-flex justify-content-end gap-1">
          <a href="#" class="btn btn-sm btn-outline-primary">Edit</a>
          <button class="btn btn-sm btn-outline-danger">Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Column Width Control

<table class="table">
  <colgroup>
    <col style="width:50%">  <!-- Name column takes half -->
    <col style="width:20%">  <!-- Framework column -->
    <col style="width:15%">  <!-- Price column -->
    <col style="width:15%">  <!-- Actions column -->
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Using <colgroup> and <col> is the cleanest way to set column widths — they apply to the entire column without repeating styles on every cell.

Sticky Header

<div style="max-height:300px; overflow-y:auto;">
  <table class="table table-hover">
    <thead class="sticky-top table-light">
      <tr>
        <th>#</th>
        <th>Template</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <!-- many rows -->
    </tbody>
  </table>
</div>

The sticky-top class on thead keeps the header visible as you scroll within the constrained height container.