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.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
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.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
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