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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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:

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jul 23, 2025

Answer

The Q&A Network