Bootstrap 5 Table Vertical alignment

Last Updated : 03 Feb, 2023

Bootstrap Tables are this is useful to make tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles. Bootstrap provides us with functionality that helps us to vertically align these table cells’ contents. By default, the contents of a table cell are always aligned to the top until customized. To customize this vertical alignment we have to use the Vertical Alignment classes.

Prerequisite: Bootstrap 5 Tables, Bootstrap 5 Vertical Alignment.

Bootstrap 5 Table Vertical alignment Used classes: No special table class is used to implement this design, you have to use the Vertical Alignment classes to add this feature.

Syntax:

<table class="table [align-middle/bottom/top]">
    <thead>
        ...
    </thead>
    <tbody>
        <tr class="align-bottom">
            <td class="align-top">
                ...
            </td>
            <td>...</td>
        </tr>
    </tbody>
</table>

Example 1: The code example below demonstrates how we can add vertical alignment to a table and how it stays intact responsively:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="m-4">
        Bootstrap 5 Table Vertical alignment
    </h4>
    <div class="table-responsive bg-dark 
                container">
        <table class="table align-bottom 
                    text-light">
            <thead>
                <tr>
                    <td>Subject</td>
                    <td>Category</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody>
                <tr class="align-middle">
                    <td>Algorithms</td>
                    <td>CS Fundamentals</td>
                    <td>
                        The word Algorithm means ” A set of rules
                        to be followed in calculations or other
                        problem-solving operations ” Or ” A procedure
                        for solving a mathematical problem in a finite
                        number of steps that frequently by recursive
                        operations “.
                    </td>
                </tr>
                <tr class="align-top">
                    <td>Bootstrap</td>
                    <td>Web technologies</td>
                    <td>
                        Bootstrap is a free and open-source tool
                        collection for creating responsive websites
                        and web applications. It is the most popular
                        HTML, CSS, and JavaScript framework for
                        developing responsive, mobile-first websites.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>

Output:

Bootstrap 5 Table Vertical alignment

Example 2: The code demonstrates how we can vertically align the items in a hoverable table:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="m-4">
        Bootstrap 5 Table Vertical alignment
    </h4>
    <div class="table-responsive bg-success 
                container">
        <table class="table align-middle 
                    text-light 
                    table-hover">
            <thead>
                <tr>
                    <td>Language</td>
                    <td>Category</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody>
                <tr class="align-top">
                    <td>CSS</td>
                    <td>Stylesheet Language</td>
                    <td>
                        CSS allows you to apply styles 
                        to web pages. More importantly, 
                        CSS enables you to do this
                        independent of the HTML that 
                        makes up each web page.
                    </td>
                </tr>
                <tr class="align-bottom">
                    <td>Bootstrap</td>
                    <td>Web Framework</td>
                    <td>
                        Bootstrap is a free and open
                        -source tool collection for 
                        creating responsive websites 
                        and web applications. It is 
                        the most popular HTML, CSS, 
                        and JavaScript framework.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>