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:

Bootstrap-5-table-basic

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table">

        <thead>

            <tr>

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

Bootstrap-5-table-contexual

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table">

        <thead>

            <tr class="table-success">

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr class="table-primary">

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr class="table-light">

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr class="table-warning">

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr class="table-danger">

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

Bootstrap-5-table-strip

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table table-striped">

        <thead>

            <tr>

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

Bootstrap-5-table-hover

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table table-hover">

        <thead>

            <tr class="table-primary">

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr class="table-success">

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

Bootstrap-5-table-borders

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>

<div class="m-4">

    <table class="table table-hover table-bordered">

        <thead>

            <tr class="table-primary">

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr class="table-success">

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

Borderless table example

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

table-borderless

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table table-hover table-borderless">

        <thead>

            <tr class="table-primary">

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr class="table-success">

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

table-header

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="m-4">

    <table class="table">

        <thead class="table-primary">

            <tr>

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

            </tr>

            <tr>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

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:

table-responsive

See online demo and code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="table-responsive">

    <table class="table">

        <thead class="table-primary">

            <tr>

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

                <th>Serial No</th>

                <th>Month</th>

                <th>Number of Sales     </th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>

                <td>1</td>

                <td>January</td>

                <td>105               </td>

                <td>$15,000.00</td>               

            </tr>

            <tr>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>

                <td>2</td>

                <td>February</td>

                <td>95</td>

                <td>$12,000.00</td>               

            </tr>

            <tr>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>               

            </tr>

            <tr>

                <td>4</td>

                <td>April</td>

                <td>50</td>

                <td>$30,00.00</td>

                <td>3</td>

                <td>March</td>

                <td>150</td>

                <td>$20,000.00</td>               

            </tr>           

        </tbody>

    </table>

</div>

</body>

</html>

 

 

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️