Tables

Bootstrap has designed its tables to be opt-in by adding the class table to any <table></table> element.

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

Inverse rows

You can inverse the color of the entire table by adding class table-inverse to the <table></table> element.

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

Table heading options

You can add inverse color to the table's column heading by adding the class thead-inverse to the <thead></thead> element.

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

Or alternatively, you can add a dark gray color to the table's column heading by adding the class thead-default to the <thead></thead> element.

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

Striped rows

You can add zebra striping to any table rows by adding the class table-striped to the <table></table> element.

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

Bordered table

You can add a border on all sides of the table and cells by adding the class table-bordered to the <table></table> element.

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

Hoverable row

You can add a hover state on table tows by adding the class table-hover to the <table></table> element.

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

Small table

You can make tables more compact vertically by cutting cell padding in half by adding class table-sm to the <table></table> element.

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

Contextual classes

You can color table rows by adding the following contextual classes to the <tr></tr>

And/or, color table cells by adding the following contextual classes to the <td></td>

• table-active - Applies the hover color to a particular row or cell.
• table-success - Applies green color to a particular row or cell indicating a successful or positive action.
• table-info - Applies blue color to a particular row or cell indicating a neutal informative change or action.
• table-warning - Applies yellow color to a particular row or cell indicating a warning that might need attention.
• table-danger - Applies red color to a particular row or cell indicating a dangerous or potentially negative action.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Isiah	Thomas	@tommy
5	Michael	Jordon	@air