Tables are essential for displaying structured data in a clear, organized way. Bootstrap 3 offers a wide range of CSS classes to style and enhance tables, ensuring they look professional and responsive across devices.
In this guide, we’ll cover the key Bootstrap table classes, their usage, and examples. For more Bootstrap tutorials, visit TheCodingCollege.com.
1. Basic Table Styling
The .table class is the foundation for all Bootstrap-styled tables. Add it to your <table> tag to apply basic styling like padding, border spacing, and hover effects.
Example:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Output: A clean, padded table with horizontal lines separating rows.
2. Striped Rows
Add .table-striped to your table for alternating row colors, improving readability for larger tables.
Example:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Output: Alternating row background colors for better visual distinction.
3. Bordered Tables
Add .table-bordered to include borders around all table cells.
Example:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Output: A fully bordered table for better data compartmentalization.
4. Hover Effect
Apply .table-hover for a hover effect on rows, making tables more interactive.
Example:
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Output: Rows are highlighted when hovered over.
5. Condensed Tables
Use .table-condensed to reduce cell padding, making tables more compact and suitable for dense data.
Example:
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Output: A more compact table with reduced cell spacing.
6. Contextual Table Classes
Add contextual classes to table rows or cells to highlight specific data with different background colors.
| Class | Description |
|---|---|
.active | Highlights the row or cell with a subtle gray. |
.success | Highlights with a green background (for positive data). |
.info | Highlights with a cyan background (for informational data). |
.warning | Highlights with a yellow background (for warnings). |
.danger | Highlights with a red background (for errors). |
Example:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Active Row</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr class="success">
<td>2</td>
<td>Success Row</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Warning Row</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Danger Row</td>
<td>Data 11</td>
<td>Data 12</td>
</tr>
</tbody>
</table>7. Responsive Tables
For tables that scroll horizontally on small screens, wrap your table in a .table-responsive container.
Example:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>Output: A scrollable table on smaller devices.
Conclusion
Bootstrap’s table classes make it easy to create stylish, responsive, and functional tables for any project. Whether you’re building a simple data table or a complex dashboard, Bootstrap offers the flexibility to suit your needs.