Our Tables

Default

For basic styling—light padding and only horizontal dividers—add the base class .table to any
<table>.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

Striped

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

Bordered

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

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

Mark

Otto

@TwBootstrap

2

Jacob

Thornton

@fat

3

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

STATES

#

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

6

Column content

Column content

Column content

7

Column content

Column content

Column content

8

Column content

Column content

Column content

9

Column content

Column content

Column content

RESPONSIVE

Create responsive tables by wrapping 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.