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.
<table> Content of the Table <table>
table_class_Type
: It will be replaced with one of the following contextual classes..table-primary
: Its color is blue and it shows that the action is important..table-success
: Its color is green and it indicates that the action is successful..table-danger
: Its color is red and it is used to indicate failure, danger, or any negative action..table-warning
: Its color is orange and it is used to highlight the areas or actions that need attention..table-secondary
: Its color is grey and it is used to highlight the action or information that is relatively less important..table-active
: Its color is also grey and it is used to add hovering effect to the table rows or a single cell..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.
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.
table-primary
inside the <tr>
tag to indicate that it is important information.table-warning
inside the <tr>
tag to indicate that certain actions need attention.table-success
inside the <tr>
tag to indicate that the action is successful as the student has achieved an A grade.table-danger
inside the <td>
tag to highlight the danger. This will only highlight the respective cell with red colour.