How to create Hoverable Table Rows in Bootstrap 5 ?

Last Updated : 24 Apr, 2025

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

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

// Your code....

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/[email protected]/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>[email protected]</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jane Smith</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Jane Smith2</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
</body>

</html>

Output:

Table Hover with Color

First, integrate Bootstrap 5 CDN links for styling and functionality. A

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 () with a light blue background color (table-primary class). The table body () contains three rows (), 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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>[email protected]</td>
                </tr>
                <tr class="table-success">
                    <th scope="row">2</th>
                    <td>Jane Smith</td>
                    <td>[email protected]</td>
                </tr>
                <tr class="table-success">
                  <th scope="row">3</th>
                  <td>Jane </td>
                  <td>[email protected]</td>
              </tr>
            </tbody>
        </table>
    </div>

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
</body>

</html>