How to use the table-responsive class In Bootstrap
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.
<!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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel=
"stylesheet">
<!-- Bootstrap JS (Optional if you need dropdowns or other features) -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center
py-3 mb-4
border-bottom">
<h1 style="color: green;">
w3wiki 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:
How to Create a Responsive Table in Bootstrap ?
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.
Table of Content
- Using the table-responsive class
- Using the table-scrollable class
- Using the Bootstrap Grid System