How to Create a Responsive Table in Bootstrap ?
Last Updated :
23 Jul, 2025
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.
Using the table-responsive class
Using the .table-responsive class in Bootstrap wraps a table, enabling horizontal scrolling on small screens while maintaining column widths. Ideal for fixed column count tables but may not suit large column counts due to challenging horizontal scrolling on small screens.
Example: To demonstrate creating a responsive table using table responsive class showcasing students' information with columns such as Index, First Name, Last Name, Age, and Enrolled Course.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Sticky Footer with Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel=
"stylesheet">
<!-- Bootstrap JS (Optional if you need dropdowns or other features) -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center
py-3 mb-4
border-bottom">
<h1 style="color: green;">
GeeksForGeeks Student Data:
</h1>
</div>
<div class="table-responsive">
<table class="table table-striped
table-bordered table-hover">
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Enrolled Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul </td>
<td>Mishra</td>
<td>23</td>
<td>DSA In JAVA</td>
</tr>
<tr>
<td>2</td>
<td>Raj </td>
<td>Shukla</td>
<td>23</td>
<td>Advanced Java</td>
</tr>
<tr>
<td>3</td>
<td>Prahant </td>
<td>Shuka</td>
<td>19</td>
<td>Web Development</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Responsive Table in Bootstrap Example OutputCreating a "table-scrollable" class involves adding custom CSS to create a fixed-height div wrapping the table with overflow-y for vertical scrolling. This maintains fixed headers while enabling horizontal scrolling and consistent column widths across screen sizes.
Example: To demonstrate creating a responsive table using table-scrollable class showcasing students' information with columns such as Index, First Name, Last Name, Age, and Enrolled Course.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer with Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap JS (Optional if you need dropdowns or other features) -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center py-3 mb-4 border-bottom">
<h1 style="color: green;">
GeeksForGeeks Student Data:
</h1>
</div>
<div class="table-scrollable">
<table class="table table-striped
table-bordered table-hover">
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Enrolled Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul </td>
<td>Mishra</td>
<td>23</td>
<td>DSA In JAVA</td>
</tr>
<tr>
<td>2</td>
<td>Raj </td>
<td>Shukla</td>
<td>23</td>
<td>Advanced Java</td>
</tr>
<tr>
<td>3</td>
<td>Prahant </td>
<td>Shuka</td>
<td>19</td>
<td>Web Development</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Responsive Table in BootstrapUsing the Bootstrap Grid System
In this approach, a grid layout is used with rows and columns corresponding to table rows and cells. Each column is wrapped in a div with a grid class like .col-md-4, allowing flexible control of column visibility and display on various screen sizes.
Example: To demonstrate creating a responsive table using bootstrap grid system showcasing students' information with columns such as Index, First Name, Last Name, Age, and Enrolled Course.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Sticky Footer with Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap JS (Optional if you need dropdowns or other features) -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center py-3 mb-4 border-bottom">
<h1 style="color: green;">
GeeksForGeeks Student Data:
</h1>
</div>
<div class="container">
<div class="row">
<div class="col">
<table class="table table-striped
table-bordered
table-hover">
<thead>
<tr>
<th>Index</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Age</th>
<th scope="col">Enrolled Course</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Raj </td>
<td>Shukla</td>
<td>23</td>
<td>Advanced Java</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul </td>
<td>Mishra</td>
<td>23</td>
<td>DSA In JAVA</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Prahant </td>
<td>Shuka</td>
<td>19</td>
<td>Web Development</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Output:
Responsive Table in Bootstrap Example Output
Similar Reads
How to Create Responsive Divs in Bootstrap ? To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon
2 min read
How To Create a Responsive Table in CSS ? A responsive table in CSS automatically changes to fit any screen size. It stays easy to read on small screens, like phones, by scrolling or adjusting columns as needed. To make a responsive table in CSS, place it inside a <div> with overflow-x: auto;. This lets the table scroll sideways on sm
3 min read
How to create Hoverable Table Rows in Bootstrap 5 ? This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class "table-hover" in the <table> tag. This effect enhance
2 min read
How to make the existing bootstrap 2 table responsive? Method 1: To make the table responsive on all viewport size, wrap the table within a opening and closing <div> tags, having class "table-responsive" within the opening <div> tag. Syntax: <div class="table-responsive"> <table class="table"> ... </table> </div> Exam
3 min read
How to make Text Responsive in Bootstrap ? Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap:
3 min read
How to Create Responsive Tables in WordPress ? In WordPress, creating responsive tables is crucial for providing a seamless user experience across various devices and screen sizes. Responsive tables ensure that the table content is easily readable and accessible, regardless of the device being used to access the website. These are the following
2 min read