In this tutorial, learn how to color 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 Bootstrap 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 Name Description
.active The class adds a hover color to the rows of a table. The hover color is the light greyish in color
.success The cass adds light green color to the table rows. The color shows the position action to display on the specified table rows.
.info The class adds light sky blue color to each table rows. The color shows the neutral informative action to display on the table row.
.warning The 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.
.danger The 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.

Color Alternate Table Rows Using Bootstrap Contextual Classes

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. 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 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 Contextual Classes

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. 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 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.

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

Leave a Reply

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.