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 |
