bootstrap_ref_css_tables

Bootstrap 5 CSS Tables Reference

Table Styling Classes

Use these foundational classes to style your HTML tables. Bootstrap 5 offers a clean, modern look for tables with minimal effort.

Class
Description
Example


.table
Adds basic styling (light padding and horizontal dividers) to any <table>. This is the base class for all table styles.
Try it


.table-striped
Adds zebra-striping to table rows within <tbody> for improved readability. Achieved using CSS :nth-child selectors.
Try it


.table-bordered
Adds borders on all sides of the table and cells.
Try it


.table-borderless
Removes all borders on the table and cells, including the default top border from .table.
Try it


.table-hover
Enables a hover state (a subtle background color change) on table rows within a <tbody>.
Try it


.table-sm
Makes the table more compact by cutting cell padding in half. Replaces the older .table-condensed class.
Try it


.caption-top
Positions the table caption (<caption> element) on the top of the table.
Try it


Combining table classes
These classes can be combined for more customized table styling. For example, <table class="table table-striped table-hover table-bordered">
Try it

Contextual Classes for Rows and Cells

Use these contextual classes to color table rows () or individual cells (, ). These classes convey meaning through color.

Class
Description
Example


.table-active
Applies a hover-like color to a particular row or cell, often used to indicate an active selection.
Try it


.table-primary
Indicates a primary action or information (typically blue).
Try it


.table-secondary
Indicates a secondary action or less important information (typically gray).
Try it


.table-success
Indicates a successful or positive action (typically green).
Try it


.table-danger
Indicates a dangerous or potentially negative action (typically red).
Try it


.table-warning
Indicates a warning that might need attention (typically yellow/orange).
Try it


.table-info
Indicates a neutral informative change or action (typically light blue/cyan).
Try it


.table-light
Specifies a light gray background for rows or cells.
Try it


.table-dark
Specifies a dark gray background, often used for headers or to invert colors.
Try it

Responsive Tables

To make tables responsive, wrap any .table in .table-responsive. This will make the table scroll horizontally on small devices (below a certain breakpoint). You can also use breakpoint-specific responsive classes like .table-responsive-sm, .table-responsive-md, etc., to control when the table becomes scrollable.

For example, .table-responsive-md will make the table scroll horizontally on screens smaller than 768px (Bootstrap’s ‘md’ breakpoint).

<div class="table-responsive">
  <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>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Example for responsive table up to medium breakpoint -->
<div class="table-responsive-md">
  <table class="table">
    <!-- table content -->
  </table>
</div>

Application Scenario: Displaying user data in an admin dashboard. A responsive table ensures that all user details are accessible even on smaller screens, with horizontal scrolling if necessary. Contextual classes can highlight new users (.table-info) or users with overdue payments (.table-danger).

For more advanced table features and customization, refer to the official Bootstrap documentation on tables.