How can I add row hover, striped, and small table styles together?

Asked on Aug 04, 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:

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.

✅ Answered with Bootstrap 5 best practices.