Tables

Table Basic

Just add the base class .table to any <table> , then extend with custom styles.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Dark

Just add the base class .table-dark to any <table> , then extend with custom styles.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Head Options

Use the modifier classes .table-light to make <thead> appear light gray.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Striped

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

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Bordered

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

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Bordered Color

Border color utilities like .border-* be added to change colors.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Borderless

Add .table-borderless for a table without borders.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Hover

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

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Nesting

Border styles, active styles, and table variants are not inherited by nested tables..

Project name

Due Date

Priority

Members

Actions

Dropbox Design System

June 2

Medium

Project name	Due Date	Priority	Members	Actions
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here

3D Character Modelling

Sept 20

Medium

Table Active

Highlight a table row or cell by adding a .table-active class.

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Table Small

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

Project name	Due Date	Priority	Members	Actions
Dropbox Design System	June 2	Medium	+5	Action Another action Something else here
Slack UI Design	June 12	High	+5	Action Another action Something else here
GitHub Satellite	Aug 14	Low	+1	Action Another action Something else here
3D Character Modelling	Sept 20	Medium	+5	Action Another action Something else here

Kristin Watson:

Brooklyn Simmons

Jenny Wilson

Sina Ray