Bootstrap 5 Responsive Tables
Last Updated :
29 Mar, 2023
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>
<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>
<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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...