Basic example
For basic styling—light padding and only horizontal dividers—add the base class
.table
to any
<table>
. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
|
#
|
First Name
|
Last Name
|
Username
|
|
1
|
Mark
|
Otto
|
@mdo
|
|
2
|
Jacob
|
Thornton
|
@fat
|
|
3
|
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
|
Bordered table
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
|
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
|
Contextual classes
Use contextual classes to color table rows or individual cells.
|
Class
|
Description
|
.active
|
Applies the hover color to a particular row or cell
|
.success
|
Indicates a successful or positive action
|
.info
|
Indicates a neutral informative change or action
|
.warning
|
Indicates a warning that might need attention
|
.danger
|
Indicates a dangerous or potentially negative action
|
|
#
|
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 tables
Create responsive tables by wrapping any
.table
in
.table-responsive
to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
#
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
|
1
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
|
2
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
|
3
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
|
#
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
Table heading
|
|
1
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
|
2
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
|
3
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|
Table cell
|