How can I add row hover, striped, and small table styles together?
Asked on Jul 23, 2025
Answer
In Bootstrap 5, you can combine row hover, striped, and small table styles using specific classes. Here's how you can achieve this:
<!-- BEGIN COPY / PASTE -->
<table class="table table-hover table-striped table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `table-hover` class adds a hover effect to table rows.
- The `table-striped` class adds zebra-striping to the table rows.
- The `table-sm` class makes the table more compact by reducing the cell padding.
- These classes can be combined to achieve the desired table styling.
Recommended Links: