Use contextual classes to color table rows or individual cells.
-<table class="table table-bordered table-striped table-responsive">
- <colgroup>
- <col class="col-1">
- <col class="col-7">
- </colgroup>
- <thead>
- <tr>
- <th>Class</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">
- <code>.table-active</code>
- </th>
- <td>Applies the hover color to a particular row or cell</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-success</code>
- </th>
- <td>Indicates a successful or positive action</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-info</code>
- </th>
- <td>Indicates a neutral informative change or action</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-warning</code>
- </th>
- <td>Indicates a warning that might need attention</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-danger</code>
- </th>
- <td>Indicates a dangerous or potentially negative action</td>
- </tr>
- </tbody>
-</table>
+| Class | Description |
+| --- | --- |
+| `.table-active` | Applies the hover color to a particular row or cell |
+| `.table-success` | Indicates a successful or positive action |
+| `.table-info` | Indicates a neutral informative change or action |
+| `.table-warning` | Indicates a warning that might need attention |
+| `.table-danger` | Indicates a dangerous or potentially negative action |
<div class="bd-example">
<table class="table">