Bootstrap 5 Table Hoverable Rows

Last Updated : 03 Dec, 2022

Bootstrap 5 Table Hoverable Rows can be used to apply a hover state on table rows within a <tbody>. It helps to focus on the individual row.

Table Hoverable Rows used Class:

table-hover: This class is used to enable a hover state feature on table rows within a <tbody>.

Syntax:

<table class="table table-hover">
    ...
</table>

Example 1: In this example, we will learn about table-hover effect.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <title>Bootstrap 5 Table Hoverable rows</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> Table Hoverable rows</h2> 
        <table class="table table-hover"> 
            <thead> 
                <tr> 
                    <th>Id</th> 
                    <th>Product</th> 
                    <th>Cost</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>11</td> 
                    <td>Stapler</td> 
                    <td>45</td> 
                </tr> 
                <tr> 
                    <td>21</td> 
                    <td>Punching Machine</td> 
                    <td>60</td> 
                </tr> 
                <tr> 
                    <td>31</td> 
                    <td>Fevicol</td> 
                    <td>40</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will learn about table hover effect with a dark theme.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
  <title>Bootstrap 5 Table Hoverable rows</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>  
            Table Hoverable rows 
        </h2> 
        <table class="table table-hover table-dark"> 
            <thead> 
                <tr> 
                    <th>Id</th> 
                    <th>Product</th> 
                    <th>Cost</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>11</td> 
                    <td>Stapler</td> 
                    <td>45</td> 
                </tr> 
                <tr> 
                    <td>21</td> 
                    <td>Punching Machine</td> 
                    <td>60</td> 
                </tr> 
                <tr> 
                    <td>31</td> 
                    <td>Fevicol</td> 
                    <td>40</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>