bootstrap table-hover is not working

Question

I am using bootstrap 3.3.4 and I have a problem. If I check the bootstrap.css file which I am loading, there is a table-hover class, but I can't use it, it just doesn't work, as I can see, table-bordered for example works. I have checked that the bootstrap.js is also loaded. Did anyone else have the same problem? I tried to search it for so long. Thanks in advance

Answer 1

From the docs on table hover, make sure to add the .table-hover class to your table element.

Also, as Daniel pointed out, bootstrap looks for a tbody to group your rows because it doesn't want to apply hover styling on the header area.

Also, for some screens, the default hover color can appear very dim so you can try making it darker with the following code:

.table-hover > tbody > tr:hover {
  background-color: #D2D2D2;
}

Here's a working demo in Stack Snippets

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>


<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>