Please wait...

Basic Table

  1. Home
  2. Tables

Basic Table

Basic example without any additional modification classes
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter

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 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter

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 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter

Hover 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 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter

Condensed Table

Add .table-condensed to 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
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter

Contextual Classes

Use contextual classes to color table rows or individual cells.
# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter
7 Jacob Thornton @fat
8 Larry the Bird @twitter