Tables are an essential part of web development, especially when displaying data in an organized, readable manner. With Bootstrap tables, you can create professional, responsive, and beautifully styled tables with minimal effort.
At TheCodingCollege.com, we’ve created this comprehensive guide to help you master Bootstrap tables. By the end of this post, you’ll know how to:
- Use Bootstrap’s predefined table classes.
- Create responsive tables for different devices.
- Customize tables with advanced features like hover effects, striped rows, and contextual classes.
What Are Bootstrap Tables?
Bootstrap tables are HTML tables enhanced with CSS styling and responsiveness. Instead of creating custom styles for every table, you can use Bootstrap’s built-in classes to quickly format data.
Basic Bootstrap Table
Here’s an example of a basic table using the table class:
<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 Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>Features of the Basic Table:
- Borders are added automatically.
- Proper padding is applied for readability.
Bootstrap Table Variants
1. Striped Rows
Add alternating row colors using the table-striped class:
<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 Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>2. Bordered Table
Add borders to all rows and columns with the table-bordered class:
<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 Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>3. Hoverable Rows
Highlight rows when the mouse hovers over them using the table-hover class:
<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 Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>4. Compact Table
Reduce padding for a more compact look with the table-sm class:
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>Responsive Bootstrap Tables
Bootstrap tables are responsive by default. To ensure tables look great on all devices, wrap the table in a table-responsive container:
<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 Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</div>How It Works:
- The
table-responsiveclass makes the table horizontally scrollable on smaller devices.
Contextual Table Classes
You can use contextual classes to style rows or cells based on their importance or status:
| Class | Description |
|---|---|
table-primary | Highlights as primary. |
table-success | Indicates success. |
table-danger | Indicates danger. |
table-warning | Indicates a warning. |
table-info | Highlights as informational. |
Example:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>1</td>
<td>Completed</td>
</tr>
<tr class="table-warning">
<td>2</td>
<td>In Progress</td>
</tr>
<tr class="table-danger">
<td>3</td>
<td>Failed</td>
</tr>
</tbody>
</table>Combining Bootstrap Table Classes
You can combine multiple classes for a polished and professional look. For example:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td class="table-success">Completed</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td class="table-warning">In Progress</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td class="table-danger">Failed</td>
</tr>
</tbody>
</table>Conclusion
Bootstrap tables make it easy to present data in a professional, readable, and responsive manner. Whether you’re creating a simple table or a complex dashboard, Bootstrap’s utility classes will save you time while ensuring a polished look.