Bootstrap 4 provides enhanced table styling options to make tables more readable, responsive, and visually appealing. With Bootstrap’s predefined classes, you can quickly create tables with styling, hover effects, borders, and responsiveness.
What This Tutorial Covers:
- Basic Bootstrap 4 table
- Table styles (striped, bordered, hover, dark mode)
- Table responsiveness
- Table sizing
- Advanced table features
1. Basic Bootstrap 4 Table
To create a Bootstrap 4 table, use the .table class. This class applies basic styling, including padding and horizontal dividers.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This table has basic styling with padding and horizontal dividers between rows.
2. Striped Table (.table-striped)
The .table-striped class adds alternating row colors for better readability.
Example:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
This enhances readability by adding alternating light gray backgrounds.
3. Bordered Table (.table-bordered)
The .table-bordered class adds borders around all cells.
Example:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
Each cell now has a border, making the table visually distinct.
4. Hover Effect (.table-hover)
The .table-hover class highlights a row when hovered over.
Example:
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
Each row will be highlighted when hovered over.
5. Dark Table (.table-dark)
The .table-dark class applies a dark theme to the table.
Example:
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
This is useful for dark-themed websites.
6. Small Table (.table-sm)
The .table-sm class reduces padding to create a more compact table.
Example:
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
This reduces row height for a more compact look.
7. Responsive Tables (.table-responsive)
If a table is too wide for a screen, use .table-responsive to make it scrollable.
Example:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
<td>123 Main St</td>
<td>+123456789</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
<td>456 Oak St</td>
<td>+987654321</td>
</tr>
</tbody>
</table>
</div>
Now, on small screens, the table will have horizontal scrolling.
8. Combining Multiple Features
You can mix different Bootstrap 4 table classes for custom styling.
Example:
<table class="table table-striped table-bordered table-hover table-dark table-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>32</td>
</tr>
</tbody>
</table>
