BS5 Tables
Bootstrap 5 Tables
A simple Bootstrap 5 table features horizontal dividers and minimal padding.
Basic styling is added to a table using the .table class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Striped Rows
Zebra stripes are added to a table using the .table-striped class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Bordered Table
Borders are added to the table and cells on both sides using the .table-bordered class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Rows
Table rows now have a hover effect (gray background color) thanks to the .table-hover class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Black/Dark Table
The table’s backdrop is made black by the .table-dark class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Â
Dark Striped Table
To make a dark, striped table, combine .table-dark and .table-striped:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hoverable Dark Table
Table rows now have a hover effect (gray background color) thanks to the .table-hover class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Borderless Table
The table’s borders are eliminated by the .table-borderless class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
Table cells (<td>), table rows (<tr>), and the entire table (<table>) can all be colored with contextual classes.
Example
| Firstname | Lastname | |
|---|---|---|
| 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 |
Contextual classes that are available for use 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
Table headers with a black background are added by the .thead-dark class, whereas those with a grey background are added by the .thead-light class:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Small table
By halving the cell padding, the .table-sm class reduces the size of the table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Responsive Tables
When the table becomes too large horizontally, the .table-responsive class adds a scrollbar to it:
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
| # | Firstname | Lastname | Age | City | Country | Sex | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Depending on the screen width, you may also choose when the table should have a scrollbar:
| 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>
