Tutorials References Exercises Videos Menu
Free Website Get Certified Upgrade

Bootstrap 5 Tables


Basic Table

A basic Bootstrap 5 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:


Striped Rows

The .table-striped class adds zebra-stripes to a table:


Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:



Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:


Black/Dark Table

The .table-dark class adds a black background to the table:


Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:


Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:


Borderless Table

The .table-borderless class removes borders from the table:


Contextual Classes

Contextual classes can be used to color the whole table (<table>),  the table rows (<tr>) or table cells (<td>).

Example

Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com
Try it Yourself »

The contextual classes that can be used are:

Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background

Table Head Colors

You can also use any of the contextual classes to only add a background color to the table header:


Small table

The .table-sm class makes the table smaller by cutting cell padding in half:


Responsive Tables

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):

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 »