Basic Tables

Basic example

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

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Linda G. Smith 606-253-1207 May 3, 1962

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Sean C. Nguyen 269-714-6825 February 5, 1994

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Bordered table

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

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00
Marco Shoes $28.49 69 Pcs $1,965.81
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

Product Courier Process Status
ASOS Ridley High Waist FedEx
Delivered
Marco Lightweight Shirt DHL
Shipped
Half Sleeve Shirt Bright
Order Received
Lightweight Jacket FedEx
Delivered

Contextual with background color

Use contextual classes to color table rows or individual cells.

Product Courier Process Status
ASOS Ridley High Waist FedEx
Delivered
Marco Lightweight Shirt DHL
Shipped
Half Sleeve Shirt Bright
Order Received
Lightweight Jacket FedEx
Delivered

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# 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
Settings

Basic Settings


Recent Activity

You sold an item Paul Burgess just purchased “Hyper - Admin Dashboard”!

5 minutes ago

Product on the Bootstrap Market Dave Gamache added Admin Dashboard

30 minutes ago

Robert Delaney Send you message "Are you there?"

2 hours ago

Audrey Tobey Uploaded a photo "Error.jpg"

14 hours ago

You sold an item Paul Burgess just purchased “Hyper - Admin Dashboard”!

1 day ago