Tables

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap restyles the plain HTML <table> element with sensible base spacing and typography (part of Reboot), then layers a set of modifier classes on <table> itself to control striping, borders, hover feedback, row/cell coloring, and horizontal overflow behavior on small screens.

The base class

Every styled table starts with .table on the <table> element. On its own it applies Bootstrap’s spacing, a horizontal divider between rows, and typography consistent with the rest of the page — with no border around the outside and no striping yet:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

scope="col" / scope="row" on the header cells are plain HTML accessibility attributes, not Bootstrap-specific — they associate each header with the column or row it labels for screen readers, and should be included regardless of which Bootstrap classes are applied.

Styling variants

All of the following are modifier classes added directly to .table, and they combine freely with each other:

Class Effect

.table-striped

Zebra-striping — alternating background color on odd rows via :nth-of-type(odd)

.table-striped-columns

Same idea, striped by column instead of by row

.table-bordered

Borders on all sides of every cell, not just the horizontal row dividers .table provides by default

.table-borderless

Removes all borders, including the default row dividers

.table-hover

Highlights whichever row is currently under the pointer

.table-sm

Halves the cell padding, for a denser table

.table-dark

Inverts the table to a dark background with light text

.table-{color}

Colors the whole table using one of the theme colors (primary, success, danger, etc.) as its background

Applied together on the base example above:

<table class="table table-striped table-bordered table-hover">
  ...
</table>

Coloring individual rows or cells

The same theme-color contextual classes apply directly to a <tr> or a <td>/<th>, not just the whole table — useful for flagging a specific row (e.g. an error state) without affecting the rest:

<table class="table">
  <tbody>
    <tr class="table-success">
      <td>Row flagged success</td>
      <td>Extra cell</td>
    </tr>
    <tr>
      <td>Normal row</td>
      <td>with one flagged cell:</td>
      <td class="table-danger">Flagged cell</td>
    </tr>
  </tbody>
</table>

Responsive tables

Wrapping a .table in a .table-responsive container lets the table scroll horizontally on narrow viewports, instead of either overflowing the page or being squeezed unreadably into a phone-width column:

<div class="table-responsive">
  <table class="table">
    <!-- a table with many columns -->
  </table>
</div>

Breakpoint-specific variants — .table-responsive-sm, -md, -lg, -xl, -xxl — make the table responsive only below that breakpoint, and a normal (non-scrolling) table from that breakpoint upward, using the same breakpoint scale as the grid system.

A fully styled responsive table

Combining the pieces above into one realistic example — dense, striped, bordered, hoverable, dark header, and horizontally scrollable on narrow viewports:

<div class="table-responsive">
  <table class="table table-sm table-striped table-bordered table-hover">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Product</th>
        <th scope="col">Category</th>
        <th scope="col">Price</th>
        <th scope="col">In Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Wireless Mouse</td>
        <td>Accessories</td>
        <td>$24.99</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Mechanical Keyboard</td>
        <td>Accessories</td>
        <td>$89.99</td>
        <td>Yes</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">3</th>
        <td>USB-C Hub</td>
        <td>Accessories</td>
        <td>$39.99</td>
        <td>Low stock</td>
      </tr>
      <tr class="table-danger">
        <th scope="row">4</th>
        <td>27" Monitor</td>
        <td>Displays</td>
        <td>$299.99</td>
        <td>Out of stock</td>
      </tr>
    </tbody>
  </table>
</div>

<thead class="table-dark"> applies the dark variant to just the header row group rather than the whole table, which is the common pattern for making the header visually distinct from the striped body rows. The .table-warning/.table-danger rows demonstrate flagging specific rows (low/out-of-stock) inline with the rest of the styling, using the same theme color names used everywhere else in Bootstrap.

See the official Tables documentation for the complete class reference, including vertical alignment and nested-table caveats.