Tables

Please read the official Bootstrap documentation for a full list of options.

Basic Table

Optional classes:
Add class .table-sm to use less padding around table cells.
Add class .table-bordered to add borders between rows.
Add class .table-striped for alternating background colors on rows.

Default

table header table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue

Small

table header table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue

Table Card

table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue

Table with Command Well

table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue

Table with Toolbar

Optional classes:
Add class .table-sticky-header to the card body and set a fixed height for a sticky header with scrollable rows.

Use the light gray toolbar background color as the default. Use the .table-card-header-blue class for a light blue background when items have been selected and text in the toolbar has changed.

No Items selected

Toolbar Text
table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue

Items selected

14 items have been selected. Clear selection
table header table header table header table header table header
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue
lorem ipsum lorem ipsum lorem ipsum
Primary
Purple Blue