Default Table

For basic styling add .table to any <table>.

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

Inverse Table

You can also invert the colors (with light text on dark backgrounds) with .table-dark.

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

Light Table Head

Use .thead-light for thead to appear it as a light background.

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

Dark Table Head

Use .thead-dark for thead to appear it as a dark background.

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

Light Striped Rows

Use .table-striped to add striped rows to any table row.

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

Dark Striped Rows

Use .table-striped.table-dark to add striped rows to any table row.

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

Bordered Table

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

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

Hoverable rows

Add .table-hover to enable hover state on table rows.

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

Small table

Add .table-sm to make tables more compact by cutting padding in table cells.

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

Contextual classes

Use contextual classes to color table rows or individual cells.

Type	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content
Primary	Column content	Column content	Column content
Secondary	Column content	Column content	Column content
Success	Column content	Column content	Column content
Danger	Column content	Column content	Column content
Warning	Column content	Column content	Column content
Info	Column content	Column content	Column content
Light	Column content	Column content	Column content
Dark	Column content	Column content	Column content

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive-{size}.

#	Heading 1	Heading 2	Heading 3	Heading 4	Heading 5	Heading 6	Heading 7	Heading 8	Heading 9	Heading 10	Heading 11	Heading 12	Heading 13
Michael Right	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
Michael Right	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
Michael Right	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