Basic Tables
HTML tables should be used for tabular data — this is what they are designed for.
Table Basic
Just add the base class .table to any <table>, then extend with custom styles.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |    5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Head Options
Use the modifier classes .table-light to make <thead> appear light gray.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Striped
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Bordered
Add .table-bordered for borders on all sides of the table and cells.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Bordered Color
Border color utilities like .border-* be added to change colors.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Borderless
Add .table-borderless for a table without borders.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Hover
Add .table-hover to enable a hover state on table rows within a <tbody>.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Nesting
Border styles, active styles, and table variants are not inherited by nested tables..
| Project name | Due Date | Priority | Members | Actions | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| June 2 | Medium | 5+ | |||||||||||||||||
| |||||||||||||||||||
| Sept 20 | Medium | 5+ | |||||||||||||||||
Table Active
Highlight a table row or cell by adding a .table-active class.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |
Table Small
Add .table-sm to make tables more compact by cutting cell padding in half.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium | 5+ | ||
| June 12 | High | 5+ | ||
| Aug 14 | Low | 1+ | ||
| Sept 20 | Medium | 5+ |