Tables

<!-- Basic table -->
<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Jane</td>
    <td>Birkins</td>
    <td>Support</td>
    <td>+3 774 28 50</td>
  </tr>
</tbody>
</table>
</div

<!-- Dark table -->
<div class="table-responsive">
<table class="table table-dark">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Jane</td>
    <td>Birkins</td>
    <td>Support</td>
    <td>+3 774 28 50</td>
  </tr>
</tbody>
</table>
</div

<!-- Dark table head -->
<div class="table-responsive">
<table class="table">
<thead class="thead-dark">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Light table head -->
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div

<!-- Light table with striped rows -->
<div class="table-responsive">
<table class="table table-striped">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark table with striped rows -->
<div class="table-responsive">
<table class="table table-dark table-striped">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div

<!-- Light bordered table -->
<div class="table-responsive">
<table class="table table-bordered">
<thead;>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark bordered table -->
<div class="table-responsive">
<table class="table table-dark table-bordered">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Table with color border. Supports all theme colors -->
<div class="table-responsive">
<table class="table table-bordered border-primary">
...
</table>
</div

<!-- Light table with hoverable rows -->
<div class="table-responsive">
<table class="table table-hover">
<thead;>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark table with hoverable rows -->
<div class="table-responsive">
<table class="table table-dark table-hover">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Position</th>
    <th>Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div

<!-- Table with contextual rows -->
<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>#</th>
    <th>Class</th>
    <th>Heading</th>
    <th>Heading</th>
  </tr>
</thead>
<tbody>
  <tr class="table-active">
    <th scope="row">1</th>
    <td>Active</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-primary">
    <th scope="row">2</th>
    <td>Primary</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-accent">
    <th scope="row">3</th>
    <td>Accent</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-secondary">
    <th scope="row">4</th>
    <td>Secondary</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-success">
    <th scope="row">5</th>
    <td>Success</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-info">
    <th scope="row">6</th>
    <td>Info</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-warning">
    <th scope="row">7</th>
    <td>Warning</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="table-danger">
    <th scope="row">8</th>
    <td>Danger</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
</tbody>
</table>
</div