Bootstrap Tables

The bootstrap has provided classes to extend the default style of HTML tables. Using bootstrap table classes, we can add the colors to your table rows, table headers, etc., and also, we can create striped table rows, border rows, hover rows, etc., based on our requirements.

Bootstrap Standard Table

To change the default style of HTML table first, create a table and add bootstrap .table class to the table (<table>) element. The bootstrap .table class will add basic styling like cell padding (8px) and horizontal dividers to the table.

The above example will return the result as shown below.

We can also invert the colors of a table like the light text on dark background by adding .table-dark class in bootstrap.

The above example will return the result as shown below.

Bootstrap Striped Table Rows 

By adding bootstrap .table-striped class to <table> element, we can create a table with alternate background colored rows like zebra-stripes.

The .table-striped class will add alternate background color to the table rows within the <tbody> element.

The above example will return the result as shown below.

Similarly, we can create a dark table with striped rows by adding .table-drak class with .table-striped class like as shown below.

The above example will return the result as shown below.

Bootstrap Table with Hoverable Rows

In bootstrap, we can add hover effect for the table rows within <tbody> element by adding .table-hover class. The .table-hover class will provide a light gray color on the hover of the row.

The above example will return the result as shown below.

Similarly, we can create a dark-themed hoverable rows table by adding .table-dark class with .table-hover class as shown below.

The above example will return the result as shown below.

Bootstrap Bordered Table

By using bootstrap .table-bordered class, we can add borders on every row and cell of the table.

The .table-bordered class will add borders on all sides of the table and cells. The above example will return the result like as shown below. 

Bootstrap Borderless Table

By adding bootstrap .table-borderless class to <table> element, we can create a table without any borders.

The above example will return the result as shown below.

Bootstrap Table Header Colors

By adding .thead-light or .thead-dark class to the table header (<thead>), we can change the table header color to light or dark gray based on our requirements.

The above example will return the result as shown below.

Same way, if you want a light gray color header, apply .thead-light class on table header (<thead>).

Bootstrap Table with Contextual Classes

The bootstrap contextual classes such as success, info, warning, etc. can use on rows (<tr>) and cells (<td>) of a table (<table>).

If you observe the above code, we applied different type of contextual classes such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark on table rows (<tr>) to change the color.

The above example will return the result as shown below. 

In case if you want to apply contextual classes on a dark-themed table, you need to use background utilities such as .bg-primary, .bg-secondary, .bg-successEtc. to achieve the same style because the regular table background variants are not available with the dark table.

If you observe the above code, we used background classes such as .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info on dark table.

The above example will return the result as shown below.

Bootstrap Small Table

In bootstrap, we can create a small or compactable table by applying .table-sm class to the <table> element. The .table-sm class will make tables more compact by cutting cell padding in half.

The above example will return the result as shown below.

Bootstrap Responsive Tables

In bootstrap, we can create responsive tables to enable horizontal scrollbar on small devices. To make any table responsive, you need to place the table (<table>) inside of div (<div>) and apply .table-responsive class on the <div> element as shown below.

Following is the example of creating the responsive table in bootstrap.

The above example will return the result as shown below.

This is how we can use the bootstrap classes to extend the default style of HTML tables based on requirements.