How to change background color of table rows or individual cells in Bootstrap ?

20 Aug, 2021
In this article, we will discuss setting the background color of the table rows & how to set the background color for an individual cell using Bootstrap. Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.
The purpose of creating the table is to display the complex & large-size data in a simple compact structured format that provides informative content while looking at a glance. This will save time to read & analyze unstructured large data. Bootstrap helps to create & decorate the content in a standard manner. We will use bootstrap build-in classes for creating the table structure. A simple HTML table can be created using below syntax:
Syntax:
<table class="table"> Table Contents... <table>
Before we proceed to our main discussion, the knowledge of creating tables using HTML will help you to understand the article in a better way. Please refer to Bootstrap 4 | Tables for many other cases of tables in bootstrap.
Bootstrap CDN Link: Let’s take an example to understand how to set up & add a Bootstrap CDN link to apply the bootstrap pre-defined classes for creating the table.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Geeks For Geeks</title>    <link href="style.css" rel="stylesheet" type="text/css" />    <link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"      crossorigin="anonymous"/>  </head>    <body>    <h1>Tables</h1>    <h3>Change color of tables</h3>    <table class="table table-bordered table-hover table-sm">      <thread>        <tr>          <th scope="col">Sl No.</th>          <th scope="col">Country</th>          <th scope="col">Capital</th>        </tr>      </thread>      <tbody>        <tr>          <th scope="row">1</th>          <td>India</td>          <td>New Delhi</td>        </tr>        <tr>          <th scope="row">2</th>          <td>Canada</td>          <td>Ottawa</td>        </tr>        <tr>          <th scope="row">3</th>          <td>Bangladesh</td>          <td>Dhaka</td>        </tr>        <tr>          <th scope="row">4</th>          <td>Australia</td>          <td>Canberra</td>        </tr>      </tbody>    </table>  </body></html>
Output:
We have added the bootstrap CDN link in our code that makes a standard & nicely structured content table. Using pre-defined classes, we can change the color of table cells and table rows. In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class. Let us learn classes one by one.
Predefined Classes: For changing the color of a row or whole table, we will use any one of the following classes.
table-active: This class applies to the hover color of the table row or cell with grey color.table-default: This class is applied to change the color to white when the default row is selected.table-primary: This class indicates the important action.table-secondary: This class indicates the less important activities.table-success: This class indicates the positive or successful action.table-danger: This class indicates a potentially negative or dangerous action.table-warning: This class indicates a warning that might need attention.table-info: This class indicates a neutral informative change or action.table-light: This class is applied for table row background or light grey table.table-dark: This class is applied for a dark grey table.
table-active: This class applies to the hover color of the table row or cell with grey color.
table-default: This class is applied to change the color to white when the default row is selected.
table-primary: This class indicates the important action.
table-secondary: This class indicates the less important activities.
table-success: This class indicates the positive or successful action.
table-danger: This class indicates a potentially negative or dangerous action.
table-warning: This class indicates a warning that might need attention.
table-info: This class indicates a neutral informative change or action.
table-light: This class is applied for table row background or light grey table.
table-dark: This class is applied for a dark grey table.
Example: In this case, we have used all the pre-defined classes to change the color of the rows.
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Geeks For Geeks</title>    <link href="style.css" rel="stylesheet" type="text/css" />    <link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"      crossorigin="anonymous"/>  </head>    <body>    <h1>Tables</h1>    <h3>Different colour of table rows</h3>      <table class="table">      <thread>        <th scope="col">Sl No.</th>        <th scope="col">Class</th>      </thread>      <tbody>        <tr class="table-active">          <th scope="row">1</th>          <td>table-active</td>        </tr>        <tr class="table-default">          <th scope="row">2</th>          <td>table-default</td>        </tr>        <tr class="table-primary">          <th scope="row">3</th>          <td>table-primary</td>        </tr>        <tr class="table-secondary">          <th scope="row">4</th>          <td>table-secondary</td>        </tr>        <tr class="table-success">          <th scope="row">5</th>          <td>table-success</td>        </tr>        <tr class="table-danger">          <th scope="row">6</th>          <td>table-danger</td>        </tr>        <tr class="table-warning">          <th scope="row">7</th>          <td>table-warning</td>        </tr>        <tr class="table-info">          <th scope="row">8</th>          <td>table-info</td>        </tr>        <tr class="table-light">          <th scope="row">9</th>          <td>table-light</td>        </tr>        <tr class="table-dark">          <th scope="row">10</th>          <td>table-dark</td>        </tr>      </tbody>    </table>  </body></html>
Output:
For changing the color of any particular cell, you can use any one of the following classes:
bg-primary: Applies to indicate positive or successful action.bg-success: Applies to indicate a successful or positive action.bg-warning: Applies to indicate a warning that might need attentionbg-danger: Applies to indicate a potentially negative or dangerous actionbg-info: Applies to indicate a neutral informative change or action.
bg-primary: Applies to indicate positive or successful action.
bg-success: Applies to indicate a successful or positive action.
bg-warning: Applies to indicate a warning that might need attention
bg-danger: Applies to indicate a potentially negative or dangerous action
bg-info: Applies to indicate a neutral informative change or action.
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Geeks For Geeks</title>    <link href="style.css" rel="stylesheet" type="text/css" />    <link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"      crossorigin="anonymous"/>  </head>    <body>    <h1>Tables</h1>    <h3>Change color of single cells</h3>    <table class="table">      <thread>        <th scope="col">Sl No.</th>        <th scope="col">Class</th>      </thread>      <tbody>        <tr>          <th scope="row">1</th>          <td class="bg-primary">bg-primary</td>        </tr>        <tr>          <th scope="row">2</th>          <td class="bg-success">bg-success</td>        </tr>        <tr>          <th scope="row">3</th>          <td class="bg-warning">bg-warning</td>        </tr>        <tr>          <th scope="row">4</th>          <td class="bg-danger">bg-danger</td>        </tr>        <tr>          <th scope="row">5</th>          <td class="bg-info">bg-info</td>        </tr>      </tbody>    </table>  </body></html>
Output:
In order to change the color for the particular table cell, we need to specify it inside the <td> tag for the particular cell. The below example illustrates to declare for a particular cell.
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Geeks For Geeks</title>    <link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"      crossorigin="anonymous"    />  </head>    <body>    <h1>Tables</h1>    <h3>Change color of tables</h3>    <table class="table table-bordered table-hover table-sm">      <thread>        <tr>          <th scope="col">Sl No.</th>          <th scope="col">Country</th>          <th scope="col">Capital</th>        </tr>      </thread>      <tbody>        <tr class="bg-primary">          <th scope="row">1</th>          <td>India</td>          <td>New Delhi</td>        </tr>        <tr>          <th scope="row">2</th>          <td class="bg-success">Canada</td>          <td>Ottawa</td>        </tr>        <tr>          <th scope="row">3</th>          <td>Bangladesh</td>          <td>Dhaka</td>        </tr>        <tr>          <th scope="row">4</th>          <td>Australia</td>          <td>Canberra</td>        </tr>      </tbody>    </table>  </body></html>
Output:
Custom color
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property