Welcome to The Coding College! In this tutorial, we’ll cover everything you need to know about Bootstrap 4 Tables. Tables are an essential tool for displaying data, and Bootstrap 4 provides a variety of classes to create responsive, styled, and interactive tables with minimal effort.
By the end of this guide, you’ll have the knowledge to create clean and functional tables for your web projects using Bootstrap 4.
What Are Bootstrap 4 Tables?
Bootstrap 4 tables are styled using predefined classes, giving them a professional look without the need for extensive custom CSS. These tables are responsive by default, allowing them to adapt seamlessly to different screen sizes.
Bootstrap also provides utilities for adding zebra stripes, borders, hover effects, and responsive features to your tables.
Basic Bootstrap 4 Table
To create a basic table, simply add the .table class to the <table> element.
Example:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table> Striped Rows
To add zebra-striping to your table rows, use the .table-striped class.
Example:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table> Bordered Table
Add borders to your table with the .table-bordered class.
Example:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table> Hoverable Rows
Use the .table-hover class to highlight rows when the user hovers over them.
Example:
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table> Responsive Tables
To make tables scroll horizontally on smaller screens, wrap them in a .table-responsive container.
Example:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</div> Table Variants
Bootstrap 4 allows you to change the background color of table rows and cells with contextual classes:
.table-primary.table-secondary.table-success.table-danger.table-warning.table-info.table-light.table-dark
Example:
<table class="table">
<thead>
<tr class="table-primary">
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr class="table-danger">
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table> Practical Example: Styled Table with Bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Tables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 Tables</h1>
<p class="lead">Learn how to create beautiful, responsive tables using Bootstrap 4.</p>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html> Best Practices for Using Bootstrap 4 Tables
- Keep Tables Simple: Avoid overloading tables with too much data. Use responsive tables for better usability on small screens.
- Combine Classes: Use
.table-striped,.table-hover, and.table-borderedtogether to enhance table readability and interactivity. - Test Responsiveness: Always test how your tables look on different screen sizes.
Learn More with The Coding College
Bootstrap 4 Tables make data presentation easy and visually appealing. At The Coding College, we provide tutorials and resources to help you master Bootstrap and other web technologies.