How to Color Alternate Table Rows Using Boostrap

In this tutorial, learn how to Color Alternate Table Rows using Bootstrap contextual classes. Predefined color CSS on Bootstrap contextual classes apply color to table rows after addition. You have to just put these table classes to any row and the color starts appearing immediately.

List of Boostrap Table Contextual Classes

There are five table color classes to apply color on table rows. You can place any one of these classes to color alternate table rows. Also, you can place all these 5 classes to alternate table rows to color each row of the table. You may also like to read Boostrap table classes to create responsive tables.

Below are the 5 table contextual classes of Bootstrap to color each row of a table.

Class NameDescription
.activeThe class adds a hover color to the rows of a table. The hover color is the light greyish in color
.successThe cass adds light green color to the table rows. The color shows the position action to display on the specified table rows.
.infoThe class adds light sky blue color to each table rows. The color shows the neutral informative action to display on the table row.
.warningThe class adds light apricot orange color to the table rows. You can use this class to indicate a warning to the table rows that might need attention in table.
.dangerThe class adds light reddish color to the rows of table. Use the color to specify a dangerous action in the table or potentially negative action in the rows of table.

You can use these classes to create alternate colored table rows. There are many tables designs available online, where you can find alternate colored table rows.

Maximum tables are made up of Bootstrap contextual classes with using .active class. However, you can add a different color to all the table rows.

How to Color Alternate Rows Using Bootstrap

If you want to apply greyish or other colors to the alternate table rows. Then add the .active to the alternate rows of the table. However, you can add other contextual classes to the table rows and add more colors.

To perform this task and apply alternate rows color, you have to apply the method given in the example below.

Output

Sr. NoCricketer NameScore
1Virat Kohli129*
2Rohit Sharma231*
3David Warner189
4Kane Williamson146
5Aaron Finch176*
6Martin Guptill153

The above example showing the table with alternate table rows color. You can hover over each row of the table, it’s showing some hover effect also using the class .table-hover. In addition to this, the class .table-bordered adds a border to the rows of the table.

Apply Different Color to Table Rows Using Bootstrap

In addition to the above-given table, you can add more colors to the table rows. You have to just add and use all the contextual classes to the table rows. Each alternate rows of the table contain different class than the previous rows.

Follow the method given in the example below to perform this task.

Output

Sr. NoCricketer NameWickets
1Kagiso Rabada7
2Ravinder Jadeja4
3James Anderson3
4Ravichandran Ashwin6
5Jason Holder2
6Trent Boult6

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

Hope, you like this post of how to add colors to the table rows using Bootstrap contextual classes. If you have any query regarding the tutorial, please comment below.

Reference
Getbootstrap Doc For Table

Also tell me, which method you are using to add colors to the table rows using Bootstrap.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.