Bootstrap Table
We can create different types of Bootstrap tables by using different classes to style them.
Bootstrap Basic Table
The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Striped Table
.table-striped class use for stripes on rows within the <tbody>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Bordered Table
.table-bordered class use for borders surrounding every element and rounded corners around the entire table
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Hover Table
.table-hover class, a light gray background will be added to rows while the cursor hovers over them
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
Contextual classes
The Contextual classes will allow you to change the background color of your table rows or individual cells. These classes can be applied to <tr>, <td> or <th>.
| Class |
Description |
| .active |
Applies the hover color to a particular row or cell |
| .success |
Indicates a successful or positive action |
| .warning |
Indicates a warning that might need attention |
| .danger |
Indicates a dangerous or potentially negative action |
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>Sahun</td>
<td>
Michal</td>
<td>19</td>
</tr>
</tr> <tr class="success">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="warning">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="danger">
<td>Mike</td>
<td>Warner</td>
<td>28</td>
</tr>
</tbody>
</table>
Responsive Table
in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
</div>
