Tables
Bordered Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table">
<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>
Striped Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-striped">
<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>
Responsive Table
| # | Firstname | Lastname | Age | City | Country | Sex | Example | Example | Example | Example |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes |
| 2 | Annaya | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes |
| 3 | Annali | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes |
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td>Annaya</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>3</td>
<td>Annali</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
Custom Table
| Car Model | Labor Cost | Parts Cost | Estimate |
|---|---|---|---|
| 2016 Mazda 3 sport | $ 20.49 | $ 44.99 | $ 65.48 |
| 1989 GMC V3500 | $ 18.00 | $ 34.99 | $ 52.99 |
| 1991 Toyata celicas | $ 25.99 | $ 29.99 | $ 55.98 |
| Fuel hose | $ 20.49 | $ 44.99 | $ 65.48 |
| Stering hose | $ 25.99 | $ 29.99 | $ 55.98 |
<div class="table-custom-responsive">
<table class="table-custom table-custom-striped table-custom-primary">
<thead>
<tr>
<th>Car Model</th>
<th>Labor Cost</th>
<th>Parts Cost</th>
<th>Estimate</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016 Mazda 3 sport</td>
<td>$ 20.49</td>
<td>$ 44.99</td>
<td>$ 65.48</td>
</tr>
<tr>
<td>1989 GMC V3500</td>
<td>$ 18.00</td>
<td>$ 34.99</td>
<td>$ 52.99</td>
</tr>
<tr>
<td>1991 Toyata celicas</td>
<td>$ 25.99</td>
<td>$ 29.99</td>
<td>$ 55.98</td>
</tr>
<tr>
<td>Fuel hose</td>
<td>$ 20.49</td>
<td>$ 44.99</td>
<td>$ 65.48</td>
</tr>
<tr>
<td>Stering hose</td>
<td>$ 25.99</td>
<td>$ 29.99</td>
<td>$ 55.98</td>
</tr>
</tbody>
</table>
</div>