Open In App

Bootstrap 5 Responsive Tables

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
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


author
21mcsrltd
Improve
Article Tags :

Explore

Lightbox