Tables
1.
Basic Tables
All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
Table Default #1.01
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
| Project | Deadline | Leader | Budget | Status | Actions |
|---|---|---|---|---|---|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
Table Responsive #2.01
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
| # | Browser & OS | IP | Location | Signed In | Action |
|---|---|---|---|---|---|
|
Safari
/
OS X |
Your Current Session |
|
12:43 PM |
||
|
Mozilla
/
Windows |
- |
|
12:43 PM |
||
|
Chrome
/
iOS |
- |
|
12:43 PM |
||
|
Edge
/
Windows |
- |
|
12:43 PM |
Table Striped #3.01
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | Product Name | Last Refresh | Last Month |
|---|---|---|---|
| 1 | 92.01% | ||
| 2 | 27.87% | ||
| 3 | 92.01% | ||
| 4 | 27.87% |
Table Hoverable #4.01
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | Name | Price | Date |
|---|---|---|---|
| Invoice # | |||
| Invoice # | |||
| Invoice # | |||
| Invoice # |
Table Small #5.01
Add .table-sm to make tables more compact by cutting cell padding in half.
| ID | Name | Amount | Payment |
|---|---|---|---|
| # | $ | ||
| # | $ | ||
| # | $ | ||
| # | $ |
Table Borderless #6.01
Add .table-borderless for a table without borders.
Table Bordered #7.01
Add .table-bordered for borders on all sides of the table and cells.
| Ticket | Completion | Create | Deadline | Actions |
|---|---|---|---|---|
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
Table Heads #8.01
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
| # | First Name | Last Name | Nick | Role | |
|---|---|---|---|---|---|
| 1 | |||||
| 2 | |||||
| 3 | |||||
| 4 |
| # | First Name | Last Name | Nick | Role | |
|---|---|---|---|---|---|
| 1 | |||||
| 2 | |||||
| 3 | |||||
| 4 |
Table Contextual #9.01
Use contextual classes to color table rows or individual cells.
| Invoice | Name | Date | Price | Status | Country |
|---|---|---|---|---|---|
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ | ||||
| # | $ |
Table Inverse #10.01
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Project | Deadline | Leader | Budget | Status | Actions |
|---|---|---|---|---|---|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|
|
|
|
Overdue |
|
Paid |
|