Bootstrap Tables
Tables display data in neat rows and columns, and Bootstrap makes them look clean with almost no effort. By adding a single class you get better spacing and borders, and with a few more classes you can add stripes, hover effects, borders, colors, and responsive scrolling. In this lesson you will learn how to build and style tables the Bootstrap way.
#Jobseeker
Find matching jobs & Auto apply with AI
The Basic .table Class
Start with a normal HTML table made of <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements. Then add the .table class to the <table> tag. Bootstrap immediately improves the spacing, adds light horizontal borders, and gives the table a consistent look.
A basic Bootstrap table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aisha</td>
<td>Designer</td>
</tr>
<tr>
<td>Ben</td>
<td>Developer</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Striped Rows, Bordered, and Hover
You can layer extra classes on top of .table to change how the table looks. Add .table-striped for zebra stripes on alternate rows, .table-bordered to draw borders around every cell, and .table-hover to highlight a row when the mouse moves over it.
Combining table styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr><th>Product</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Notebook</td><td>$3</td></tr>
<tr><td>Pen</td><td>$1</td></tr>
<tr><td>Eraser</td><td>$1</td></tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Colored Tables and Rows
Bootstrap offers contextual color classes for whole tables and for individual rows or cells. Use .table-dark for a dark table, or add classes like .table-success and .table-danger to a <tr> to color a single row.
Coloring rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table class="table">
<tbody>
<tr class="table-success"><td>Order shipped</td></tr>
<tr class="table-warning"><td>Payment pending</td></tr>
<tr class="table-danger"><td>Order cancelled</td></tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Responsive Tables
Wide tables can overflow small screens. Wrap your table in a <div> with the class .table-responsive and Bootstrap will add horizontal scrolling on narrow devices, so the table stays usable on phones without breaking the layout.
Making a table responsive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr><th>ID</th><th>Name</th><th>Email</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Priya</td><td>priya@mail.com</td><td>India</td></tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- Always begin with the .table class on the table element.
- Stack extra classes like .table-striped and .table-hover to combine effects.
- Use contextual classes such as .table-success on a <tr> to color a single row.
- Wrap wide tables in .table-responsive so they scroll on small screens.
Exercise: Bootstrap Tables
What does the base .table class provide?
