How to Color Alternate Table Rows Using Boostrap

In this tutorial, learn how to Color Alternate Table Rows using Bootstrap. The short answer is: use the Bootstrap .table-striped class to add greyish color to alternate table rows automatically.

You can also use the 5 Bootstrap table contextual classes that are predefined to color table rows as given below:

  • .active: add a light greyish color to the table rows.
  • .success: To add a light green color to the table rows.
  • .info: Apply light sky blue color to the table rows.
  • .warning: To add a light apricot orange color to the table rows.
  • .danger: add a light reddish color to the table rows.

It requires just add any of the contextual table classes to the rows of a table and the color starts appearing immediately. Let’s find out with the examples given below.

How to Color Alternate Table Rows Using Bootstrap

If you want to apply greyish color to the alternate table rows. You have to just add the .table-striped class to the HTML <table> tag. After you add the class, alternate table rows start displaying greyish color as showing in the example below:

Test it Live

Output

Sr. No Cricketer Name Score
1 Virat Kohli 129*
2 Rohit Sharma 231*
3 David Warner 189
4 Kane Williamson 146
5 Aaron Finch 176*
6 Martin Guptill 153

The above example showing the table with alternate greyish color rows. You can also use the .table-hover class of Bootstrap to add a hover effect to the table rows. In addition to this, the class .table-bordered adds a border to the rows of the table.

Apply Different Color to Table Rows with Bootstrap Contextual Classes

In addition to the above example, you can also apply a different color to the table rows by using the contextual classes to the table rows. Each alternate rows of the table contain a different class than the previous rows. This makes the table rows attractive and eye-grabbing for users as given below:

Test it Live

Output

Sr. No Cricketer Name Wickets
1 Kagiso Rabada 7
2 Ravinder Jadeja 4
3 James Anderson 3
4 Ravichandran Ashwin 6
5 Jason Holder 2
6 Trent Boult 6

The above example showing all the colors created using the Bootstrap contextual classes. You can use only the above-given classes to add different colors to the table rows.

You May Also Like to Read

I hope, you like this post on how to add colors to the table rows using Bootstrap contextual classes.

Reference
Getbootstrap Doc For Table