Open In App

Bootstrap 5 Table Vertical alignment

Last Updated : 31 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

What is Bootstrap Tables?

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 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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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:

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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/tables/#vertical-alignment 


Next Article
Bootstrap 5 Table head

T
triashabiswas
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox