Bootstrap 4 Tables

Bootstrap Tables are the ways of showing the data in a tabular manner that contains rows and columns. A simple table using HTML looks congested and the look is not good. You can style tables and change the appearance easily using Bootstrap 4.

Let’s start creating different styling of tables using Bootstrap 4.

Simple Table Using Bootstrap 4

You can create a simple table with Bootstrap 4 that adds a horizontal divide with each row and a cell padding of .75 rem (about 12px). Add the class .table to the <table> element for creating a simple table as given below:

Output

The above example showing the rows and columns and horizontal dividers with each row. The cells of a table contain small padding as given above.

Dark Table Using Bootstrap 4

The dark table is the table that contains a dark background with a light text color. You have to use the Bootstrap 4 class .table-dark with the base class .table to the <table> element as given below:

Output

The above example showing the dark background table with white text color in each cell.

Table Head Dark and Light Using Bootstrap 4

As you have created a simple light table and a dark table using Bootstrap 4. You can also add a light color and the dark color to the header of the table.

To create a simple table with a light head color of a table, you have to add the Bootstrap 4 class .thead-dark to the <thead> element and the base class .table to the <table> element of a table as given below:

Output

The above example showing a table that contains a dark background head.

You can also create a light head table by adding the Bootstrap 4 class .thead-light to the <thead> element and base class .table to the <table> element of a table as given below:

Output

The above example contains the table with light head color that you can test live to check it live.

Striped Table Rows

You can add a zebra-stripes to the alternate table rows that add a background color to the alternate rows. Use the .table-striped class with the base class .table to the <table> element as given below:

Output

The above example shows the striped table rows that are the alternate background color rows to the table.

Similarly, you can also create a dark striped table using Bootstrap 4. Use the class .table-dark and .table-striped with the base class .table to the <table> element as given below:

Output

The above example shows the dark table with an alternate background color that creates a zebra-stripes in the table.

Bordered Table in Bootstrap 4

A bordered table is a table that contains borders on all sides of a table. Add the .table-bordered with the base class .table to the <table> element as given below:

Output

The above table showing the borders on all sides with a border of size 2px in the head cells.

Similarly, you can create a dark bordered table using Bootstrap 4. Add the .table-dark and .table-bordered with the base class .table to the <table> element as given below:

Output

The above example showing the dark bordered table that you can test live with the button given.

Borderless Table in Bootstrap 4

A borderless table is a table that contains no borders on all sides. To create a borderless table, you have to add the Bootstrap 4 class .table-borderless with the base class .table to the <table> element as given below:

Output

The above example showing the borderless table with no borders on all sides.

Likewise, you can create a dark borderless table using Bootstrap 4. Add the Bootstrap 4 class .table-dark and .table-borderless with the base class .table to the <table> element as given below:

Output

The above table is a dark table without any borders in each cell.

Hoverable Table in Bootstrap 4

You can create a hoverable table in Bootstrap 4 that enable a hover state on table rows within <tbody>. Add the class .table-hover with the base class .table to the <table> element as given below:

Output

You can test the above example live and check the hover state by hovering over the rows of the table.

In the same manner, you can create a dark hoverable table using Bootstrap 4. You have to add the class .table-dark and .table-hover with the base class .table to the <table> element as given below:

Output

The above example shows the hoverable dark table that you can test live.

Small Table in Bootstrap 4

You can create more compact tables that cut half the padding of the simple table. Add the class .table-sm with the base class .table to the <table> element as given below:

Output

Similarly, you can make a dark table with a compact size in Bootstrap 4. Add the class .table-dark and .table-sm with the base class .table to the <table> element as given below:

Output

The above example showing the dark compact cells table with half padding in each cell.

Contextual Classes to Color Table in Bootstrap 4

You can add colors to the table rows or individual table cells using Bootstrap 4 contextual classes. There are many contextual classes (like .table-active, .table-default, .table-primary, and others) that you can use to add background colors to table rows as given in the example below:

Output

The above example shows the different background color added to the table rows or individual table cells using contextual classes.

The dark table can be created using the .table-dark with the base class .table. But, you cannot use the above contextual classes to add background colors to the table row or individual cells. You have to use the background classes like .bg-primary, .bg-success, .bg-warning, and others as given below:

Output

The dark table with background colors to the individual table rows and cells that looks beautiful and you test live above.

Caption in a Table Using Bootstrap 4

A caption works like a heading in a table that you can add using <caption> element in Bootstrap 4 as given below:

Output

The above example showing the caption just below the table that appears as a heading.

Create Responsive Tables Using Bootstrap 4

Bootstrap provides a responsive class .table-responsive that is always responsive in all breakpoints. However, you can use the breakpoints to make Bootstrap 4 tables responsive according to the specified breakpoint in a table as given below.

Always Responsive Table

You can create a table that is always responsive using Bootstrap 4. Add the .table-responsive to the <div> element and place the table inside it as given below:

You can check the above example live and resize your browser to check the responsiveness of the table.

Small (sm) Breakpoint Responsive Table

To make a table responsive until it reaches the small breakpoint, use the .table-responsive-sm class as given below:

Medium (md) Breakpoint Responsive Table

To make a table responsive until it reaches the medium breakpoint, use the .table-responsive-md class as given below:

Large (lg) Breakpoint Responsive Table

To make a table responsive until it reaches the large breakpoint, use the .table-responsive-lg class as given below:

Extra Large (xl) Breakpoint Responsive Table

To make a table responsive until it reaches the extra large breakpoint, use the .table-responsive-xl class as given below: