Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

contextual class
table
boostrap
communitycreator
html

What are contextual classes of tables in Bootstrap?

Fouzia Bashir

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 class="table table_class_Type"> 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.

  • HTML

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.

RELATED TAGS

contextual class
table
boostrap
communitycreator
html
RELATED COURSES

View all Courses

Keep Exploring