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.
| Row |
First Name |
Last Name |
Email |
| 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 |
Email |
| 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 |
| Row |
First Name |
Last Name |
Email |
| 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 |
Email |
| 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 |
| Row |
First Name |
Last Name |
Email |
| 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 |