Tables
Basic Tables
Here's an example of a basic table, with no classes added.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
And for a nice touch add the small heading classes to your heading cells.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
Striped Tables
Use the class table-striped
to add zebra-striping to any table row within the <tbody>
.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Bordered Tables
Add the class table-bordered
for borders on all sides of the table and cells.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Hover Rows
Add the class table-hover
to enable a hover state on table rows within a <tbody>
.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Condensed Tables
For a more tight and compact look, add the class table-condensed
.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
And again, for a nice touch combine this with the small heading classes.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
Contextual Classes
You can add any of the contextual classes to your table rows or cells.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Color Library
Similarly to how you can use contextual color classes, you can also use any class from the color library.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Inverse Tables
To use light text on a dark background, add class table-inverted
.
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
# |
First Name |
Last Name |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |
Responsive Tables
One crucial thing missing from all of the table examples above is the responsiveness. Of course we want our tables to display nicely on mobile devices. So to create responsive tables, wrap 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 |
Team |
87 |
Sydney |
Crosby |
Penguins |
97 |
Connor |
McDavid |
Oilers |
8 |
Alex |
Ovechkin |
Capitals |
91 |
John |
Tavares |
Islanders |
8 |
Brent |
Burns |
Sharks |