Bootstrap 5 Table

Basic table

A basic Bootstrap 5 table has a little inner padding and horizontal separators.

.table Add basic styles to the table with the class:

Example

Try It Yourself

Striped rows

.table-striped Add zebra stripes to the table with the class:

Example

Try It Yourself

Table with borders

.table-bordered Add borders to all edges of the table and cells with the class:

Example

Try It Yourself

Rows with hover effect

.table-hover Add hover effect (gray background color) to the table rows:

Example

Try It Yourself

Black/Dark table

.table-dark Add a black background to the table with the class:

Example

Try It Yourself

Dark striped table

combined .table-dark And .table-striped To create a dark striped table:

Example

Try It Yourself

Dark table with hover effect

.table-hover Add hover effect (gray background color) to the table rows:

Example

Try It Yourself

Borderless table

.table-borderless Remove borders from the table:

Example

Try It Yourself

Contextual classes

Contextual classes can be used to style the entire table (<table>) of table row (<tr>) or table cell (<td>) Coloring.

Example

Try It Yourself

Available contextual classes:

Class Description
.table-primary Blue: indicates important actions.
.table-success Green: indicates success or positive actions.
.table-danger Red: indicates danger or potential negative behavior.
.table-info Light blue: indicates neutral information changes or operations.
.table-warning Orange: indicates a warning that may need attention.
.table-active Gray: applies hover color to table rows or table cells.
.table-secondary Gray: indicates less important actions.
.table-light Light gray table or table row background.
.table-dark Dark gray table or table row background.

Table Header Color

You can also use any contextual class to add a background color only to the table title:

Example

Try It Yourself

Small Table

.table-sm Class makes the table smaller by halving the cell padding:

Example

Try It Yourself

Responsive Table

.table-responsive Class adds a scrollbar to the table as needed (when it is too wide in the horizontal direction):

Example

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Try It Yourself

You can also decide when the table should get a scrollbar, depending on the screen width:

Class Screen Width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Example

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Try It Yourself