BS Tables
Bootstrap Basic Table
A basic Bootstrap table has little padding and only horizontal divisions.
The .table class provides basic style for a table:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Striped Rows
The .table-striped class adds zebra stripes to a table.
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Bordered Table
The .table-bordered class adds borders to all sides of the table and cells.
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Rows
The .table-hover class applies a hover effect (gray background color) to table rows:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Condensed Table
The .table-condensed class makes a table more compact by reducing cell padding by half:
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
Table rows (<tr>) and cells (<td>) can be colored using contextual classes.
Example
The following contextual classes can be used:
| Class | Description |
|---|---|
.active |
Applies the hover color to the table row or table cell |
.success |
Indicates a successful or positive action |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
Responsive Tables
The .table-responsive class generates a responsive table. On small devices (768px or less), the table will scroll horizontally. When viewing on anything larger than 768 pixels wide, there is no change:
Example
The following contextual classes can be used:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Complete Bootstrap Table Reference
For a complete list of all table classes, see our Bootstrap Tables Reference.
