Bootstrap Contextual table classes
Contextual table classes
Use contextual classes to color table rows or individual cells.
Class | Description |
---|---|
.success | Indicates a successful or positive action |
.danger | Indicates a dangerous or potentially negative action |
.warning | Indicates a warning that might need attention |
.active | Applies the hover color to a particular row or cell |
Example
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w w. j ava2 s. c om-->
<body style='margin: 20px;'>
<table class="table table-condensed">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="danger">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="active">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="warning">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>