Bootstrap 4 Tables


Basic Table

To create a normal table in bootstrap, we need a .table class.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Table With Bordered

If you want to put a border on a table in bootstrap, you need to use a .table-bordered class.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Table With Borderless

If you want to remove all the borders from the table in bootstrap, you have to use the table .table-borderless class.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Table Striped

If the table is to be striped in bootstrap or the even rows of the tbody are to be marked with a different color, then the .table-striped class is to be used.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Hoverable Rows

If the table rows in Bootstrap need to be hoverable (the background-color of that row will change when the user's mouse pointer is on the row) then the .table-hover class will be required.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Dark Table

Creating a dark / black background table in bootstrap requires the .table-dark class.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Dark Striped Table & Hoverable Rows

Combine .table-dark,.table-striped,.table-hover classes.

Example

Name Roll Marks
Ajay 1 98
Chandan 2 95
John 3 90

Contextual Classes of Table

Contextual classes in Bootstrap are used to fill the entire table (<table>) or table rows (<tr>), with the background-color of the table cell (<td>).

Example

Name Roll Marks
Ajay 1 98
Ajay 1 98
Chandan 2 95
John 3 90
John 3 90
John 3 90
John 3 90
John 3 90
John 3 90

Table Head Background Colors

To change the background color of <thead> then you use .thead-dark .

Example

Name Roll Marks
Ajay 1 98
Ajay 1 98
Chandan 2 95

Small Table

The .table-sm class in bootstrap basically removes the padding of all the cells in the table.

Example

Name Roll Marks
Ajay 1 98
Ajay 1 98
Chandan 2 95


Responsive Table

When a table becomes much larger horizontally than the screen, the .table-responsive class is used to display it responsibly.

Example

Name Roll Marks Example Example Example Example Example Example Example Example Example Example Example Example Example
Ajay 1 98 True True True True True True True True True True True True True
Ajay 1 98 True True True True True True True True True True True True True
Chandan 2 95 True True True True True True True True True True True True True

.table-responsive depends on a screen size when responsive to a class table.

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