Back to Job Interview Question listing

Using Bootstrap, how do you color individual table rows or cells?

Experience Level: Junior

Tags: Bootstrap 4

Answer

In order to create a table with individually colored rows or cells, use standard html tags <table>, <tr>, <th> and <td>. Then add a class table-primary to the <tr> tag or <td> tag.

Bootstrap table with colored row

<table class="table">
  <tr>
    <th>ID</th>
	<th>Name</th>
  </tr>
  <tr class="table-primary">
    <td>11</td>
    <td>Peter</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Jane</td>
  </tr>
</table>

Bootstrap table with colored cell

<table class="table">
  <tr>
    <th>ID</th>
	<th>Name</th>
  </tr>
  <tr>
    <td>11</td>
    <td class="table-primary">Peter</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Jane</td>
  </tr>
</table>