Bootstrap 5 Responsive Tables
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= 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= 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 pradehs</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>Addmision 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 pradehs</td> </tr> </tbody> </table> </div> </div></body></html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables
Please Login to comment...