Open In App

Bootstrap 5 Tables

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.

Bootstrap 5 Tables:

TermDescription
VariantsUsed to create different colored tables. Contextual classes create variant tables.
Accented tablesThree types: striped, hoverable, and active. Used in different situations for visual effects.
How they workTechniques used to apply effects to all table variants.
Table bordersClasses for setting or unsetting table borders. Customizable with Bootstrap 5.
Small tablesCreate smaller versions of normal tables.
Vertical alignmentSets alignment of table cells' content.
NestingAllows placing a table inside another table. Prevents parent styles from affecting the child.
How nesting worksExplanation of nesting functionality.
AnatomyTable head, table foot, and captions.
Responsive tablesCreates tables that scroll horizontally for responsiveness.
SassInvolves Sass map and spacing utilities declared in Utility API.

The below examples illustrate the Bootstrap 5 Tables:

Example 1: In this example, we will create a small table.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-3">
        <strong
            >Bootstrap 5 Tables Small
            Table</strong
        >

        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">No</th>
                    <th scope="col">Course</th>
                    <th scope="col">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>HTML- Basics</td>
                    <td>$29</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>CSS- Basics</td>
                    <td>$25</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>JS- Basics</td>
                    <td>$35</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Output:

table
Bootstrap 5 Tables Example Output

Example 2: In this example, we will see the use of whole Table anatomy.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-3">
        <strong
            >Bootstrap 5 Tables Anatomy</strong
        >
        <table class="table caption-top">
            <caption>
                Front-end Courses
            </caption>
            <thead class="table-dark">
                <tr>
                    <th scope="col">No</th>
                    <th scope="col">Course</th>
                    <th scope="col">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>HTML- Basics</td>
                    <td>$29</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>CSS- Basics</td>
                    <td>$25</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>JS- Basics</td>
                    <td>$35</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th scope="row"></th>
                    <td>Front-End Bundle</td>
                    <td>$89</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Output:

table2
Bootstrap 5 Tables Example Output



S

skyridetim
Improve
Article Tags :

Explore

Lightbox