Bootstrap Contextual classes



The Bootstrap Contextual Class allows you to change the background color of your table rows or individual cells.

The following are the classes −

Class
Description
.active
Applies the hover color to a particular row or cell
.success
Indicates a successful or positive action
.warning
Indicates a warning that might need attention
.danger
Indicates a dangerous or potentially negative action

Example

The following is an example of the active class −

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <title>Bootstrap Table</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel="stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = "/bootstrap/js/bootstrap.min.js"></script>    </head>    <body>       <table class = "table">          <thead>             <tr>                <th>Subject</th>                <th>Marks</th>                <th>Student</th>             </tr>          </thead>          <tbody>             <tr class = "active">                <td>Maths</td>                <td>90</td>                <td>Amit</td>             </tr>             <tr>                <td>Science</td>                <td>80</td>                <td>Aman</td>             </tr>             <tr>                <td>English</td>                <td>85</td>                <td>Rahul</td>             </tr>          </tbody>       </table>    </body> </html>
Updated on: 2020-06-12T12:53:55+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements