How to Color Alternate Table Rows Using Boostrap

Last Updated on January 11, 2021 by Roshan Parihar

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:

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:

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

• Bootstrap Table
• HTML table tag
• Add Border To Table With Bootstrap, CSS or jQuery

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

Reference
Getbootstrap Doc For Table