Tables

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Basic Tables

.table
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Dark

.table-dark
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Head Options

.thead-dark or .thead-light
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Striped Rows

.table-stiped
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Bordered

.table-bordered
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Hover

.table-hover
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Small

.table-sm
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz
# First Name Last Name Username
1 Mickey Mouse @MickeyMouse
2 Minnie Mouse @MinnieMouse
3 Winnie the Pooh @PoohBear
4 Buzz Lightyear @theBuzz

Table Responsive

.table-responsive
# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
2 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
3 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell

Table Responsive with Breakpoints

.table-responsive-{sm, md, lg, xl}
# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
2 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
3 Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell

Contextual Classes

<tr> or <th> or <td> & .table-{color} = .table-{active, primary, secondary, success, danger, warning, info, light, dark}
Type Column Heading Column Heading Column Heading
Acitive Content Content Content
Default (no class) Content Content Content
Primary Content Content Content
Secondary Content Content Content
Success Content Content Content
Danger Content Content Content
Warning Content Content Content
Info Content Content Content
Light Content Content Content
Dark Content Content Content
# Column Heading Column Heading Column Heading
1 Acitive Primary Secondary
2 Success Danger Warning
3 Info Light Dark
Type Column Heading Column Heading Column Heading
Primary Content Content Content
Default Content Content Content
Secondary Content Content Content
Default Content Content Content
Success Content Content Content
Default Content Content Content
Danger Content Content Content
Default Content Content Content
Warning Content Content Content
Default Content Content Content
Info Content Content Content