Tables

Table Basic

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

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
avatar avatar avatar +5
Slack UI Design
June 12 High
avatar avatar avatar +5
GitHub Satellite
Aug 14 Low
avatar avatar avatar +1
3D Character Modelling
Sept 20 Medium
avatar avatar avatar +5

Table Head Options

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

Table Striped

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

Table Bordered

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

Table Borderless

Add .table-borderless for a table without borders.

Table Hover

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

Table Small

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