« Previous Next »

Basic Table

A standard table in Bootstrap includes soft padding and horizontal lines to separate rows.

The .table class adds basic styling to a table:

Example

Output :

Striped Rows

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

Output :

Bordered Table

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

Output :

Hover Rows

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

Output :

Black/Dark Table

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

Output :

Dark Striped Table

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

Output :

Hoverable Dark Table

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

Output :

Borderless Table

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

Output :

Contextual Classes

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

Output :

You can apply these utility classes to convey different contexts like success, danger, or warning through styling.

Class Color Description
.table-primary Blue Indicates an important action
.table-success Green Shows a successful or positive action
.table-danger Red Represents danger or a negative action
.table-info Light Blue Used for informational changes
.table-warning Orange Indicates a warning that may need attention
.table-active Gray (Hover effect) Applies hover color to the row or cell
.table-secondary Gray Used for less important actions
.table-light Light Gray Gives a light background to row or cell
.table-dark Dark Gray Gives a dark background to row or cell

Table Head Colors

You may also apply contextual classes specifically to the table header to set its background color.

Output :

Small table

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

Output :

Responsive Tables

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

Output :

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

Class Applies Below Width Description
.table-responsive-sm < 576px Makes table scrollable horizontally on small screens and below
.table-responsive-md < 768px Enables horizontal scrolling for medium screens and smaller
.table-responsive-lg < 992px Applies responsiveness for large devices and below
.table-responsive-xl < 1200px Responsive behavior below extra-large screen size
.table-responsive-xxl < 1400px Applies responsive scrolling to extra extra large devices and down
« Previous Next »