Tables
Inspiration comes of working every day.Tables
You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the (table) element.Basic Table
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Carter | johncarter@mail.com |
| 2 | Peter | Parker | peterparker@mail.com |
| 3 | John | Rambo | johnrambo@mail.com |
| 4 | Juna | Doe | johnrambo@mail.com |
| 5 | Alea | Smith | johnrambo@mail.com |
| 6 | Resa | Parker | johnrambo@mail.com |
Tables with Alternate Background (striped)
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Carter | johncarter@mail.com |
| 2 | Peter | Parker | peterparker@mail.com |
| 3 | John | Rambo | johnrambo@mail.com |
| 4 | Juna | Doe | johnrambo@mail.com |
| 5 | Alea | Smith | johnrambo@mail.com |
| 6 | Resa | Parker | johnrambo@mail.com |
Table with Borders
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Carter | johncarter@mail.com |
| 2 | Peter | Parker | peterparker@mail.com |
| 3 | John | Rambo | johnrambo@mail.com |
| 4 | Juna | Doe | johnrambo@mail.com |
| 5 | Alea | Smith | johnrambo@mail.com |
| 6 | Resa | Parker | johnrambo@mail.com |
Hover State on Table Rows
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Carter | johncarter@mail.com |
| 2 | Peter | Parker | peterparker@mail.com |
| 3 | John | Rambo | johnrambo@mail.com |
| 4 | Juna | Doe | johnrambo@mail.com |
| 5 | Alea | Smith | johnrambo@mail.com |
| 6 | Resa | Parker | johnrambo@mail.com |
Condensed Table
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Carter | johncarter@mail.com |
| 2 | Peter | Parker | peterparker@mail.com |
| 3 | John | Rambo | johnrambo@mail.com |
| 4 | Juna | Doe | johnrambo@mail.com |
| 5 | Alea | Smith | johnrambo@mail.com |
| 6 | Resa | Parker | johnrambo@mail.com |
Emphasis Classes on Table Rows
| Class | Description |
|---|---|
.active |
Applies the hover color to a particular row or 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 |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |