Travis Watson
Admin
Basic Tables
Code Editor Example
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Markol | the otto | @dribbble |
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 | ||
Table Head Dark
Similar to tables and dark tables, use the modifier classes Similar to tables and dark tables, use the modifier classes Use Add Use contextual classes to color table rows or individual cells. A Add .thead-dark to make s appear dark.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Table Head Light
.thead-light to make s appear light
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Striped Table
.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
Hover Table
.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
Contextual 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
7
Jacob
Thornton
@fat
8
Larry
the Bird
@twitter
9
Jacob
Thornton
@fat
10
Larry
the Bird
@twitter
Captions Table
<caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Small table
.table-sm 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
Account Setting
General Setting
