A basic Bootstrap table has a light padding and only horizontal dividers. The table class adds basic styling to a table.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
The table-striped class adds zebra-stripes to a table.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
The table-bordered class adds borders on all sides of the table and cells.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
The table-hover class adds a hover effect (grey background color) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
The table-condensed class makes a table more compact by cutting cell padding in half.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
Contextual classes can be used to color table rows <tr> or table cells <td>.
| Firstname | Lastname | |
|---|---|---|
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
The table-responsive class creates a responsive table. The table will then scroll horizontally on small devices under 768px.
Leave a comment