In Bootstrap, the predefined classes are utilized to add various styling to the elements. These classes help developers to create responsive and visually appealing websites. More specifically, styling tables is one of the valuable features of Bootstrap. While working with tables, one common task is changing the background color of rows or individual cells.
This write-up will describe:
How to Create a Bootstrap Table?
To create a table in Bootstrap, try out the following steps:
-
- First, add a “<table>” element to make a table. Assign it the “table”, “table-bordered” and “table-hover” classes.
- Then, to specify the table header, use the “<thead>” tag, which consists of “<th>” tags to specify the headings.
- After the header part, create the body part by using the “<tbody>” element, which consists of the “<tr>” for the row and the “<td>” part.
HTML
<thead>
<tr>
<th>S No.</th>
<th>Student Names</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Beena</td>
<td>Operating Systems</td>
</tr>
<tr>
<th>2</th>
<td>Marry</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<th>3</th>
<td>Linda</td>
<td>Computer Systems </td>
</tr>
<tr>
<th>4</th>
<td>Peter</td>
<td>Graphic Designing </td>
</tr>
</tbody>
</table>
As you can see, the Bootstrap table has been created successfully:
How to Modify the Table Rows Color in Bootstrap?
The predefined classes are used for changing the table or row colors as explained below:
| Classes | Description |
| “table-primary” | This class is utilized to indicate vital action. It adds a blue color to the table elements. |
| “table-danger” | This class is used to represent the negative action. It applies a red color to the table elements. |
| “table-success” | It shows the positive action and applies green color to the table elements. |
| “table-warning” | It displays warnings that require some action and adds a yellow color to the table components. |
| “table-default” | This class adds white color to the table components and is used for showing the row that is selected. |
| “table-secondary” | It applies a grayish color to the table elements and indicates the less important activities. |
| “table-active” | It applies gray color to the table components on hover. |
| “table-info” | It applies a light blue color to indicate a neutral informative action. |
| “table-dark” | It is utilized to create a dark gray table. |
| “table-light” | It adds gray color and is used to specify the table row background. |
Example
Let’s implement each class to the table rows:
<thread>
<th scope="col">S No.</th>
<th scope="col">Bootstrap Class</th>
</thread>
<tbody>
<tr class="table-primary">
<th>1</th>
<td>table-primary</td>
</tr>
<tr class=" table-danger">
<th>2</th>
<td>table-danger</td>
</tr>
<tr class="table-success">
<th>3</th>
<td>table-success</td>
</tr>
<tr class="table-warning">
<th>4</th>
<td>table-warning</td>
</tr>
<tr class="table-default">
<th>5</th>
<td>table-default</td>
</tr>
<tr class="table-secondary">
<th>6</th>
<td>table-secondary</td>
</tr>
<tr class="table-info">
<th>8</th>
<td>table-info</td>
</tr>
<tr class="table-active">
<th>7</th>
<td>table-active</td>
</tr>
<tr class="table-dark">
<th>9</th>
<td>table-dark</td>
</tr>
<tr class="table-light">
<th>10</th>
<td>table-light</td>
</tr>
</tbody>
</table>
Output
How to Modify the Color of Individual Cells in Bootstrap?
To change the color of individual cells, several classes can be utilized, like:
-
- “bg-info” signifies a neutral informative action and adds a blue color.
- “bg-primary” represents the positive action and applies a blue color.
- “bg-danger” indicates the dangerous action and adds a red color.
- “bg-warning” is utilized to add a yellow color and indicates a warning message.
- “bg-success” indicates a positive action.
To adjust the color of the individual cell, add the required class to the specific data cell “<td>”. Check out the example that demonstrates the above-discussed explanation.
Example: Changing the Color of a Specific Table Cell in Bootstrap
In the following example:
-
- To change the table row color, specify the class within the “<tr>” tag.
- To set the specific table cell color, specify a class for that particular “<td>” element:
<thead class="bg-danger">
<tr>
<th>S No.</th>
<th>Student Names</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td class="bg-success">Beena</td>
<td>Operating Systems</td>
</tr>
<tr>
<th>2</th>
<td>Marry</td>
<td>Object Oriented Programming</td>
</tr>
<tr class="bg-warning">
<th>3</th>
<td>Linda</td>
<td>Computer Systems </td>
</tr>
<tr>
<th>4</th>
<td>Peter</td>
<td>Graphic Designing </td>
</tr>
</tbody>
</table>
Output
That was all about changing the background color of table rows or individual cells in Bootstrap.
Conclusion
To change the background color of table rows, the “table-hover” class can be used. Several classes can be used to specify the row’s background color, such as “table-danger”, “table-warning”, “table-dark”, “table-primary”, and many more. More specifically, to change the specific table’s cell color, multiple classes, such as “bg-danger”, “bg-success”, and “bg-info” are utilized. This write-up has explained how to change the background color of table rows or individual cells in Bootstrap.
