Table Hover using table-hover Utility
First, integrate Bootstrap 5 CDN links for styling and functionality. Bootstrap’s “table-hover” class is applied to the table element, enabling the hover effect on table rows.
Example: Illustration of hoverable table rows in Bootstrap5 using the table-hover utility.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Hoverable Table Rows</title></head><body> <div class="container mt-5"> <h1 class="text-success text-center"> Hoverable Table Rows </h1> <h2 class="text-center"> Hover the rows to see the effect </h2> <table class="table table-hover "> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Email</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>John Doe</td> <td>john@example.com</td> </tr> <tr> <th scope="row">2</th> <td>Jane Smith</td> <td>jane@example.com</td> </tr> <tr> <th scope="row">3</th> <td>Jane Smith2</td> <td>jane@example.com</td> </tr> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script></body></html> |
Output:
Output
How to create Hoverable Table Rows in Bootstrap 5 ?
This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class “table-hover” in the <table> tag. This effect enhances user interaction by dynamically changing the appearance of rows when hovered over, providing feedback, and making the table more interactive.
Contact Us