Content & Styles

Tables

Basic table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Advanced example

Name Title Status Position Actions

John Doe

john.doe@gmail.com

Software engineer

IT department

 Active Senior

Alex Ray

alex.ray@gmail.com

Consultant

Finance

 Onboarding Junior

Kate Hunington

kate.hunington@gmail.com

Designer

UI/UX

 Awaiting Senior

Variants

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell

Striped

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable with striped

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Active tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Border color utilities

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Borderless

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Nesting

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter

Additional examples

Buttons

# First Last Handle Action
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Checkboxes

 First Last Handle
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter

Icons

Product Detail Views Unique Purchases Quantity Product Revenue Avg. Price
Value 18,492 228 350 $4,787.64 $13.68
Percentage change -48.8% 14.0% 46.4% 29.6% -11.5%
Absolute change -17,654 28
 111 $1,092.72 $-1.78

Project Footer

Project Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.