Article Categories

Selected Reading

Bootstrap Contextual classes

Bootstrap HTML Javascript jQuery

Bootstrap contextual classes allow you to change the background color of table rows or individual cells to convey different meanings and states. These classes provide visual feedback to users about the status or importance of data.

Available Contextual Classes

Class	Description	Visual Effect
`.active`	Applies the hover color to a particular row or cell	Light gray background
`.success`	Indicates a successful or positive action	Light green background
`.info`	Indicates informational or neutral content	Light blue background
`.warning`	Indicates a warning that might need attention	Light yellow background
`.danger`	Indicates a dangerous or potentially negative action	Light red background

Example: Using All Contextual Classes

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Contextual Classes</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>
        <div class="container">
            <h3>Student Performance Report</h3>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Subject</th>
                        <th>Marks</th>
                        <th>Student</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="success">
                        <td>Mathematics</td>
                        <td>95</td>
                        <td>Amit</td>
                        <td>Excellent</td>
                    </tr>
                    <tr class="info">
                        <td>Science</td>
                        <td>75</td>
                        <td>Sarah</td>
                        <td>Good</td>
                    </tr>
                    <tr class="warning">
                        <td>English</td>
                        <td>65</td>
                        <td>Mike</td>
                        <td>Needs Improvement</td>
                    </tr>
                    <tr class="danger">
                        <td>History</td>
                        <td>45</td>
                        <td>John</td>
                        <td>Failed</td>
                    </tr>
                    <tr class="active">
                        <td>Geography</td>
                        <td>80</td>
                        <td>Lisa</td>
                        <td>Selected</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Using Contextual Classes on Individual Cells

You can also apply contextual classes to individual table cells instead of entire rows:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Cell-Level Context</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <h3>Project Status Dashboard</h3>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Project</th>
                        <th>Status</th>
                        <th>Progress</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Website Redesign</td>
                        <td class="success">Completed</td>
                        <td class="success">100%</td>
                    </tr>
                    <tr>
                        <td>Mobile App</td>
                        <td class="warning">In Progress</td>
                        <td class="info">75%</td>
                    </tr>
                    <tr>
                        <td>Database Migration</td>
                        <td class="danger">Delayed</td>
                        <td class="warning">30%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Best Practices

Use .success for positive outcomes (completed tasks, high scores)
Use .warning for items requiring attention but not critical
Use .danger for critical issues or failures
Use .info for neutral informational content
Use .active to highlight currently selected or focused items

Conclusion

Bootstrap contextual classes provide an easy way to add semantic meaning and visual distinction to table data. Use them consistently to help users quickly understand the status and importance of information in your tables.

Arjun Thakur

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next