789

Sales

1,234

Order

$900

Send

BootstrapTable layout with some custom color, you can find the full bootstrap table documentation here

Basic table

For basic styling—light padding and only horizontal dividers—add the base class .tableto any <table>.

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

Add .table-borderedfor borders on all sides of the table and cells

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

Add .table-condensedto make tables more compact by cutting cell padding in half

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

Use contextual classes to color table cells .active.success.info.warning.danger

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter
Striped row table

Use .table-stripedto add zebra-striping to any table row within the <tbody>.

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

Add .table-hoverto enable a basic bootstrap hover state on table rows. Add .an-table-hoverto enable hover color to match with template color with transparency.

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

Use contextual classes to color table rows .active.success.info.warning.danger

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

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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