Basic Tables
My Table
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
Ann C. Thompson
Sean C. Nguyen
Striped Columns
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 |
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 |
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 |
Inverse 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 |
Bordered Table
Risa D. Pearson
Paul J. Friend
Sean C. Nguyen
Bordered Color Table
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 |
Basic Borderless Example
Add .table-borderless for a table without borders.
| 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 Borderless Table
Add .table-borderless for a table without borders.
| 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 |
|
Active Tables
Highlight a table row or cell by adding a .table-active class.
| 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 |
|
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
| Name | Phone Number | Date of Birth | Active? | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
||||||||||||
|
|||||||||||||||
| Linda G. Smith | 606-253-1207 | September 2, 1939 |
|
||||||||||||
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 Foot
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 |
| Footer | Footer | Footer | Footer |
Captions
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 |
Caption Top
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 |