Tables

Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Bordered table

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

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

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Steve Urkel @steve
Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Steve Urkel @steve
Contextual classes

Use contextual classes to color table rows or individual cells.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
Small table

Add .table-smto make tables more compact by cutting cell padding in half.

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

Create responsive tables by adding .table-responsive to any .table 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 Username Age City
1 Mark Otto @mdo 20 Cityname
2 Jacob Thornton @fat 20 Cityname
3 Larry the Bird @twitter 20 Cityname
4 Steve Mac Queen @steve 20 Cityname