Bootstrap 5 Table Breakpoint Specific
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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...