Bootstrap Tables
Bootstrap makes plain HTML tables look clean and professional by adding the .table class. From there, extra classes let you add striping, borders, hover effects and color themes.
Tables are also responsive-friendly: wrapping a table in a .table-responsive div allows it to scroll horizontally on small screens instead of breaking the page layout.
<table class="table table-striped">...</table>Basic table styling
Add .table to a <table> element for basic spacing and borders. Add .table-striped for zebra-striped rows, .table-bordered for all borders, and .table-hover to highlight rows on mouse hover.
Responsive and colored tables
Wrap your table in <div class="table-responsive"> to enable horizontal scrolling on narrow screens. Use .table-{color} classes like .table-dark for a full theme, or apply them to a single row or cell.
<table class="table table-striped table-hover">
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Amy</td><td>95</td></tr>
<tr><td>Ben</td><td>88</td></tr>
</tbody>
</table>A striped table with rows that highlight on hovertable-striped alternates row background colors and table-hover highlights the row under the mouse.
<div class="table-responsive">
<table class="table table-dark">
<tr><th>Item</th><th>Price</th></tr>
<tr><td>Book</td><td>$10</td></tr>
</table>
</div>A dark-themed table that scrolls horizontally if too wide for the screentable-responsive wraps the table so it can scroll instead of overflowing on small screens.
Key points
- Add .table to any <table> for basic Bootstrap styling.
- .table-striped and .table-hover improve readability.
- .table-responsive enables horizontal scrolling on small screens.
- Color classes like .table-dark theme the whole table.