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

Asked on Aug 04, 2025

1 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.

← Back to All Questions