1.

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

Answer»

The contextual classes are USED to change the BACKGROUND color of table rows or individual cells in Bootstrap 4. The FOLLOWING are the classes with the colors they represent:

  • .table-success class: A positive action (Green)
  • .table-warning class: A warning (Orange)
  • .table-danger class: A negative action (Red)
  • .table-primary class: An important action (Blue)
  • .table-secondary class: A less important action (GREY)
  • .table-active class: Hover color (Grey)
  • .table-light class: Light grey table
  • .table-dark class: Dark grey table

Let us now see an example to change the background color in a table:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Contextual Classes</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Investor's Data</h2>   <p>The following is the Investor's data:</p>               <table class="table table-bordered">     <thead>       <tr>         <th>Company</th>         <th>Investor</th>       </tr>     </thead>     <tbody>       <tr class="table-primary">         <td>ABC</td>         <td>PQ</td>       </tr>       <tr class="table-danger">         <td>GHI</td>         <td>VW</td>       </tr>       <tr class="table-warning">         <td>JKL</td>         <td>EF</td>       </tr>       <tr class="table-active">         <td>RST</td>         <td>IJ</td>       </tr>       <tr class="table-success">         <td>MNO</td>         <td>KL</td>       </tr>     </tbody>   </table> </div> </body> </html>

Here is the output:


Discussion

No Comment Found

Related InterviewSolutions