Use contextual classes to color table rows or individual cells.
|
Class
|
Description
|
.active
|
Applies the hover color to a particular row or cell
|
.success
|
Indicates a successful or positive action
|
.info
|
Indicates a neutral informative change or action
|
.warning
|
Indicates a warning that might need attention
|
.danger
|
Indicates a dangerous or potentially negative action
|
|
#
|
Column heading
|
Column heading
|
Column heading
|
|
1
|
Column content
|
Column content
|
Column content
|
|
2
|
Column content
|
Column content
|
Column content
|
|
3
|
Column content
|
Column content
|
Column content
|
|
4
|
Column content
|
Column content
|
Column content
|
|
5
|
Column content
|
Column content
|
Column content
|
|
6
|
Column content
|
Column content
|
Column content
|
|
7
|
Column content
|
Column content
|
Column content
|
|
8
|
Column content
|
Column content
|
Column content
|
|
9
|
Column content
|
Column content
|
Column content
|
<table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">1</th> <td>Column content</td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> </tr> <tr class="success"> <th scope="row">3</th> <td>Column content</td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> </tr> <tr class="info"> <th scope="row">5</th> <td>Column content</td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> </tr> <tr class="warning"> <th scope="row">7</th> <td>Column content</td> </tr> <tr> <th scope="row">8</th> <td>Column content</td> </tr> <tr class="danger"> <th scope="row">9</th> <td>Column content</td> </tr> </tbody></table>