Open In App

Bootstrap 5 Responsive Tables

Last Updated : 01 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 Responsive table is used to make a table responsive in two different categories we can make the table always responsive, or make the table responsive on the basis of the breakpoint.

Bootstrap 5 Responsive Tables:

  • Table Always Responsive: This is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive.
  • Table Breakpoint Specific: This s specifically used to scroll the table horizontally on a particular viewport, we can add a class table-responsive-*. This * can be substituted with a particular breakpoint of viewport like sm, md, lg, xl, etc.

Syntax:

<div class="Table responsive Class">
     <table class="table">
         ...
     </table>
</div>

Example 1: In this example, we will make the table always responsive.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="m-2">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Responsive Tables</strong>
        <p class="text-center">This table will be always responsive</p>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Stream</th>
                        <th>Section</th>
                        <th>Roll_No</th>
                        <th>College</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>First Year</td>
                        <td>Computer Science Engineering</td>
                        <td>CSE A</td>
                        <td>1445698658</td>
                        <td>Geeksforgeeks Education Institute</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <br><br>
        <p class="text-center">This table is not responsive</p>
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Stream</th>
                        <th>Section</th>
                        <th>Roll_No</th>
                        <th>College</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>First Year</td>
                        <td>Computer Science Engineering</td>
                        <td>CSE A</td>
                        <td>1445698658</td>
                        <td>Geeksforgeeks Education Institute</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will make the table responsive on the basis of breakpoints.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="m-2">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Responsive Tables</strong>
        <p class="text-center">
          This table will be responsive when the breakpoint is set ot small
        </p>
        <div class="table-responsive-sm">
            <table class="table">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Stream</th>
                        <th>Section</th>
                        <th>Roll_No</th>
                        <th>College</th>
                        <th>Favourite Sub</th>
                        <th>Classes</th>
                        <th>Admission Via</th>
                        <th>Registration_Id</th>
                        <th>State</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Fourth Year</td>
                        <td>Computer Science Engineering</td>
                        <td>CSE A</td>
                        <td>1445698658</td>
                        <td>Geeksforgeeks Education Institute</td>
                        <td>Automata</td>
                        <td>Morning Class</td>
                        <td>Entrance Exam</td>
                        <td>CSE-1445698658</td>
                        <td>Utter pradesh</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <br><br>
        <p class="text-center">This table is always responsive</p>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Stream</th>
                        <th>Section</th>
                        <th>Roll_No</th>
                        <th>College</th>
                        <th>Favourite Sub</th>
                        <th>Classes</th>
                        <th>Admission Via</th>
                        <th>Registration_Id</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Fourt Year</td>
                        <td>Computer Science Engineering</td>
                        <td>CSE A</td>
                        <td>1445698658</td>
                        <td>Geeksforgeeks Education Institute</td>
                        <td>Automata</td>
                        <td>Morning Class</td>
                        <td>Entrance Exam</td>
                        <td>CSE-1445698658</td>
                        <td>Utter pradesh</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Output:

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


Next Article
Bootstrap 5 Table SASS
author
21mcsrltd
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