Bootstrap 5 Tables

Just like Bootstrap 3 and Bootstrap 4 tables, you may create tables in Bootstrap 5 with various styles by utilizing built-in classes.

These include:

• Tables with contextual classes for colors
• Creating tables with striped rows
• Stripped columns
• Tables with Hovered rows
• Active Tables
• Tables with and without borders
• Add footer in a table by using tfoot tag.

Quick Demos with Code:

Basic Table, Using Contextual Classes, Stripped Rows, Hovered Table, Bordered, Borderless

You may see the demos with codes in the section below.

An example of a basic table using Bootstrap 5

Let us start the examples of Bootstrap 5 tables with a basic one. In this example, we just included the Bootstrap 5 CSS from the CDN in the head section of the web page. Four dummy rows are created for demonstration:

See online demo and code

The demo of the table with contextual classes

In this example, we created different colored table rows by using the built-in contextual classes for table. Different contextual classes have specific meanings and colors. For example, success represents green, danger as red, and so on. A few of the available contextual classes are:

• table-dark
• table-light
• table-primary
• table-success
• table-danger
• table-info
• table-warning
• table-active

The usage of this is shown below:

See online demo and code

Stripped table example with code

Creating stripped tables is pretty easy by using the .table-striped class at the table tag level. This will create table rows with zebra-stripping as shown in the demo below:

See online demo and code

An example of a table with hovered rows

You may use the built-in .table-hover class for making rows in the hover state. For the demo, the .table-hover is added in the table tag. A row is created with the .table-success class, so you may see the hover effect in a colored row as well:

See online demo and code

An example of a bordered table

For adding borders on all sides of the table, just add the table-bordered class in the main table tag. For the demo, I just added this class to the above example (hovered table) and see the output:

See online demo and code

Borderless table example

Similarly, you may create a borderless table by using the .table-borderless class. Have a look:

See online demo and code

Specifying table head color

Want to specify table header color only? You may give the contextual class to the <thead> class. See an example below where we provided the .table-primary class to the table header:

See online demo and code

How to create responsive tables?

You may create responsive tables using BS5 by using its built-in class.

In all of the above examples, if table data is more than the viewport space, no scrollbar will display at the table level. However, the scrollbar appears at the webpage level.

For showing the horizontal scrollbar at table level, you may specify the .table-responsive class in the div containing the table.

If you want to show the scrollbar only for certain devices like mobile and tablets and not for desktops (big screens), you may specify the breakpoint as well. To specify breakpoint for specific viewports, you may use the:

• -sm
• -md
• -lg
• -xl
• -xxl

While only using the .table-responsive class will display a horizontal scrollbar for all devices. See an example below:

See online demo and code