Tables

Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Condensed Table
Add .table-sm to make tables more compact by cutting cell padding in half.
Operation System Users Share
Windows 8.232 40%
Mac OS 3.322 20%
Linux 4.232 34%
FreeBSD 1.121 12%
Chrome OS 1.331 15%
Android 2.301 20%
iOS 1.162 14%
Windows Phone 562 7%
Other 1.181 14%
Hoverable Rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
Name Phone Number Date of Birth
Avatar Vanessa Tucker 864-348-0485 June 21, 1961
Avatar William Harris 914-939-2458 May 15, 1948
Avatar Sharon Lessman 704-993-5435 September 14, 1965
Avatar Christina Mason 765-382-8195 April 2, 1971
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Contextual Classes
Use contextual classes to color table rows or individual cells.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
Admin Stone

Color Scheme

The perfect color mode for your app.

Default
Colored
Dark
Light