How to create Hoverable Table Rows in Bootstrap 5 ?
Last Updated :
19 Feb, 2024
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.
Syntax
<table class="table table-hover">
// Your code....
</table>
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=
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=
</script>
</body>
</html>
|
Output:
Output
Table Hover with Color
First, integrate Bootstrap 5 CDN links for styling and functionality. A <table> element with the classes table and table-hover is used to create the table. The table-hover class adds a hover effect to the rows. The table has a header row (<thead>) with a light blue background color (table-primary class). The table body (<tbody>) contains three rows (<tr>), each with the class table-success, giving them a green background color.
Example: Illustration of hoverable table rows with background color in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<title>Hoverable Table Rows</title>
</head>
<body>
<div class="container mt-5">
<h1 class="text-success">
GeeksforGeeks Hoverable Table Rows
</h1>
<h2>Hover the rows to show the effect</h2>
<table class="table table-hover">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<th scope="row">1</th>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
<tr class="table-success">
<th scope="row">2</th>
<td>Jane Smith</td>
<td>jane@example.com</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td>Jane </td>
<td>jane@example.com</td>
</tr>
</tbody>
</table>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...