Tables
Use tables to show more complex amount of data
Default
| # | First | Last | Actions |
|---|---|---|---|
| 1 |
Jackson Pro
|
Larry |
|
| 2 |
Jacob Mid
|
Thornton |
|
| 3 |
Larry Pro
|
Doe |
|
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="d-flex align-items-center">
Jackson <span class="badge badge-primary ml-2">Pro</span>
</div>
</td>
<td>Larry</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div class="d-flex align-items-center">
Jacob <span class="badge badge-secondary ml-2">Mid</span>
</div>
</td>
<td>Thornton</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div class="d-flex align-items-center">
Larry <span class="badge badge-tertiary ml-2">Pro</span>
</div>
</td>
<td>Doe</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
</tbody>
</table>Dark
Use the .table-dark modifier class to make tables dark:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Larry | Jackson | @larry |
| 2 | Jacob | Thornton | @jacobt |
| 3 | Larry | Page | @lpage |
<table class="table table-dark">
<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>Larry</td>
<td>Jackson</td>
<td>@larry</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@jacobt</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Page</td>
<td>@lpage</td>
</tr>
</tbody>
</table>Hover
Use the .table-hover modifier class to enable hovering over table rows:
| # | First | Last | Actions |
|---|---|---|---|
| 1 |
Jackson Pro
|
Larry |
|
| 2 |
Jacob Mid
|
Thornton |
|
| 3 |
Larry Pro
|
Doe |
|
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="d-flex align-items-center">
Jackson <span class="badge badge-primary ml-2">Pro</span>
</div>
</td>
<td>Larry</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div class="d-flex align-items-center">
Jacob <span class="badge badge-secondary ml-2">Mid</span>
</div>
</td>
<td>Thornton</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div class="d-flex align-items-center">
Larry <span class="badge badge-tertiary ml-2">Pro</span>
</div>
</td>
<td>Doe</td>
<td>
<div class="d-flex">
<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i>
<i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i>
</div>
</td>
</tr>
</tbody>
</table>