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? |
|---|---|---|---|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
Name Phone Number Date of Birth Active? Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980
INVERSE TABLE
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
Name Phone Number Date of Birth Active? Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980 Semp D. Pearson 123-456-7890 July 24, 1980
STRIPED ROWS
Use .table-striped to add zebra-striping to any table row within the tbody
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
| Semp D. Pearson | 123-456-7890 | July 24, 1980 |
|
TABLE HEAD OPTIONS
Use one of two modifier classes to make s appear light or dark gray.
Add .table-hover to enable a hover state on table rows within a tbody. Add .table-sm to make tables more compact by cutting cell padding in half. Add .table-bordered for borders on all sides of the table and cells. Add .table-bordered & .border-primary can be added to change colors 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. Add .table-borderless for a table without borders. Add .table-borderless for a table without borders. Highlight a table row or cell by adding a .table-active class. Border styles, active styles, and table variants are not inherited by nested tables.
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
HOVERABLE ROWS
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
SMALL TABLE
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
BORDERED TABLE
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
BORDERED COLOR TABLE
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
ALWAYS RESPONSIVE
#
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
#
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
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
INVERSE BORDERLESS TABLE
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
ACTIVE TABLES
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Name
Phone Number
Date of Birth
Active?
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
Semp D. Pearson
123-456-7890
July 24, 1980
NESTING
Name
Phone Number
Date of Birth
Active?
Risa D. Pearson
336-508-2157
July 24, 1950
Name
Phone Number
Date of Birth
Active?
Semp G. Smith
123-456-7890
September 2, 1939
Semp G. Smith
123-456-7890
September 2, 1939
Semp G. Smith
123-456-7890
September 2, 1939
Name
Phone Number
Date of Birth
Active?
Risa D. Pearson
336-508-2157
July 24, 1950
Name
Phone Number
Date of Birth
Active?
Semp G. Smith
123-456-7890
September 2, 1939
Semp G. Smith
123-456-7890
September 2, 1939
Semp G. Smith
123-456-7890
September 2, 1939