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