Tables

Basic Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Striped Rows
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Bordered Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Hover Rows
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Condensed Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Condensed Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Rounded Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Rounded Table
# First Name Last Name Login
1 Jeremy Lee jeremylee@gmail.com
2 Henry Collins henrycollins@gmail.com
3 John Clark johnclark@gmail.com
4 Jonathan Cooper jonathancooper@gmail.com
Contextual Classes

Contextual classes

Use contextual classes to color table rows or individual cells.

.active .primary .success .info .warning .danger .inverse

# 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


# 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
Contextual Classes

Contextual backgrounds

Use contextual backgrounds to color table rows or individual cells.

.bg-default .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-inverse

# 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

# 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
Responsive Table

Responsive table

Resize browser window down to 768px to see horizontally scrollable content.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell Table cell Table cell
5 Table cell Table cell Table cell Table cell Table cell Table cell

Responsive bordered table

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell Table cell Table cell
5 Table cell Table cell Table cell Table cell Table cell Table cell

Scrollable table

# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell