Documentation
Tables
Using the most basic table markup,.table.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<Table striped responsive="md">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
Variants
Use the required class variant (e.g. table-primary, table-secondary) for color.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<Table responsive="md">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</Table>
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<Table striped responsive="md">
<thead>
...
</thead>
<tbody>
...
</tbody>
</Table>