Skip to content

Elements:Tables

Default Styles

Add the class .table to opt-in to the default table styling.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse Table

Add the class .table-inverse to inverse the table styling.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Add the class .table-striped to apply alternating table row background colours. Works with both default and inverse tables.

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse striped

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add the class .table-bordered to apply borders to the table and table rows. Works with both default and inverse tables.

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse bordered

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

Add the class .table-hover to apply a hover effect to rows when they are hovered. Works with both default and inverse tables.

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse hoverable rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small Tables

Add the class .table-sm to apply more compact padding to table cells. Works with both default and inverse tables.

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse small table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head

Add the classes .thead-default or .thead-inverse to alter the background colour of thead elements.

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse table head

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table row & cell colours

On non-inverse tables you can apply the follow classes to either tr or td or th elements to change the background colour.

Class Column heading Column heading
.table-active Column content Column content
.table-primary Column content Column content
.table-secondary Column content Column content
.table-info Column content Column content
.table-success Column content Column content
.table-warning Column content Column content
.table-danger Column content Column content
.table-dark Column content Column content
.table-light Column content Column content

Inverse table row & cell colours

Inverse tables can use the contextual background colours to alter tr or td or th background colours.

Class Column heading Column heading
.bg-primary Column content Column content
.bg-info Column content Column content
.bg-success Column content Column content
.bg-warning Column content Column content
.bg-danger Column content Column content

Responsive Tables

Add a wrapper with the class .table-responsive to make tables scrollable horizontally on small screenwidths. Resize the screen to see the example below.

# First Name Last Name Username Email Phone
1 Mark Otto @mdo me@appstrap.com 0934921309132
2 Jacob Thornton @fat me@appstrap.com 082713968789
3 Larry the Bird @twitter me@appstrap.com 0856723883

Vertical alignment

You acn set the vertical alignment of table cell & head content using these classes.

align-baseline align-top align-middle align-bottom align-text-top align-text-bottom

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page