Bootstrap 5 Tables

Last Updated : 10 Apr, 2024

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:

Term	Description
Variants	Used to create different colored tables. Contextual classes create variant tables.
Accented tables	Three types: striped, hoverable, and active. Used in different situations for visual effects.
How they work	Techniques used to apply effects to all table variants.
Table borders	Classes for setting or unsetting table borders. Customizable with Bootstrap 5.
Small tables	Create smaller versions of normal tables.
Vertical alignment	Sets alignment of table cells' content.
Nesting	Allows placing a table inside another table. Prevents parent styles from affecting the child.
How nesting works	Explanation of nesting functionality.
Anatomy	Table head, table foot, and captions.
Responsive tables	Creates tables that scroll horizontally for responsiveness.
Sass	Involves 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:

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

Bootstrap 5 Figures

skyridetim

Improve

Article Tags :

Bootstrap 5 Tables

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?