What are contextual classes of tables in Bootstrap?

Contextual classes

Bootstrap offers a variety of classes combined under the name contextual classes. We can use them to color the whole table, its rows, columns, or even a single cell.

Syntax

---

<table> Content of the Table <table>

---

• table_class_Type: It will be replaced with one of the following contextual classes.

List contextual classes

1. .table-primary: Its color is blue and it shows that the action is important.
2. .table-success: Its color is green and it indicates that the action is successful.
3. .table-danger: Its color is red and it is used to indicate failure, danger, or any negative action.
4. .table-warning: Its color is orange and it is used to highlight the areas or actions that need attention.
5. .table-secondary: Its color is grey and it is used to highlight the action or information that is relatively less important.
6. .table-active: Its color is also grey and it is used to add hovering effect to the table rows or a single cell.
7. .table-info: Its color is light blue and it indicates that the action or information that needs to be changed is neutral and will not impact the others.

Note: Always use these classes with light themes and backgrounds of the tables for better visualization.

Explanation

Some classes are used in this code to highlight the placement of these classes and their impact on the final result.

We use classes table-primary, table-warning, table-success, and table-danger in the code above.

• Line 14: We use class table-primary inside the <tr> tag to indicate that it is important information.
• Line 22: We use table-warning inside the <tr> tag to indicate that certain actions need attention.
• Line 28: We use class table-success inside the <tr> tag to indicate that the action is successful as the student has achieved an A grade.
• Line 38: We use the class table-danger inside the <td> tag to highlight the danger. This will only highlight the respective cell with red colour.