Open In App

Bootstrap 5 Table Breakpoint Specific

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Table Breakpoint is 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. This is called table breakpoint specific.

Bootstrap 5 Table Breakpoint specific Classes:

  • table-responsive-*: To make the table responsive based on the viewport. The * can be substituted with viewports like sm, md, lg, xl, xxl.

Syntax

<div class="table-responsive-*">
     <table class="table">
         ...
     </table>
</div>

Example 1: In this example, we will learn about table responsiveness with lg breakpoint.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Table Breakpoint Specific</h2>
        <div class="table-responsive-lg">
            <table class="table">
                <thead>
                  <tr>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="table-active">
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                  </tr>
                  <tr>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>                    
                  </tr>
                  <tr>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                  </tr>
                  <tr>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In this example, we will learn about table responsiveness with md breakpoint.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-2">
    <div class="container">
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Table Breakpoint Specific</h2>
        <div class="table-responsive-md">
            <table class="table">
                <thead>
                  <tr>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                    <th>State</th>
                    <th>Capital</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="table-active">
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                  </tr>
                  <tr>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                    <td>Punjab</td>
                    <td>Chandigarh</td>                    
                  </tr>
                  <tr>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                    <td>Goa</td>
                    <td>Panaji</td>
                  </tr>
                  <tr>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>


Output:

 

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



Last Updated : 19 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads