Highlight Table Row on Hover Using Twitter Bootstrap

Introduction

Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. I am using Bootstrap and have created a table in which I need to highlight a table row on hover. In this article, we use some Twitter Bootstrap CSS to highlight a table row on hover. A Twitter Bootstrap table can be styled and well designed. You can style your table by just adding some classes to your table and it’ll look nice. In the previous article, I created a table using Bootstrap.

Creating Table Using Twitter Bootstrap

Using Twitter Bootstrap, you may create a static navbar. - See more at http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf

What Bootstrap is

Twitter Bootstrap was created by two guys at Twitter who wanted to speed up (bootstrap) their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons, and so on. These are the common requirements of any project. With these, you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module-based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals, and more.

To read more see Bootstrap.

Include with HTML

Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like the following:

HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file as in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.

Using bootstrap CSS class="table-striped table-hover"

Just another good looking table. I added the "table-hover" class because it gives a nice hovering effect. Now open the bootstrap.css file and find the "table-hover" class. The HTML file looks as in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
</body>
</html>

The HTML will render with Bootstrap CSS as in the following:

It only changes color on rows that are white. Now you want to change the color on row hover other than white. To do that use table-hover and override the color. The following CSS defines that:

<style type="text/css">
.table-hover tbody tr:hover td
{
background-color: Blue;
}
</style>

The HTML file looks as in the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.table-hover tbody tr:hover td {
background-color: Blue;
}
body {
margin: 50px;
}
</style>
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th> id</th>
<th> Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
</body>
</html>

The HTML will render with Bootstrap as in the following:

It only highlights the background color of rows. Now you want to change the color on row hover with the foreground color. To do that use table-hover and override the color.

The following CSS defines that:

.table-hover tbody tr:hover td
{
background-color: Blue;
color: red;
}

The HTML file looks as in the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.table-hover tbody tr:hover td {
background-color: Blue;
color: red;
}
body {
margin: 50px;
}
</style>
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th> id</th>
<th> Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
</body>
</html>

The HTML will render with Bootstrap as in the following: