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 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

Table with Borders
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

Condensed Table
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