Basic Tables

Regular Table

Add class .tablein table tag.

# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
4 David Perry Perry123 supporter
5 Anthony Davie Davie123 member
6 Alan Gilchrist Gilchrist123 supporter
Table head options

Similar to tables and dark tables, use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.

# thead-primary Last Name Username Role
# thead-secondary Last Name Username Role
# thead-success Last Name Username Role
# thead-warning Last Name Username Role
# thead-info Last Name Username Role
# thead-danger Last Name Username Role
# thead-dark Last Name Username Role
# thead-light Last Name Username Role
Table Hover

Add class .table-hoverin table tag.

# Products Popularity Sales
1 Milk Powder 1,6,6,9,7,4,8,5,2,1 28.76%
2 Air Conditioner 7,5,2,4,5,7,9,3,1,2 8.55%
3 RC Cars 0,3,6,1,2,4,6,3,2,1 58.56%
4 Down Coat 9,8,5,4,9,4,3,2,1,8 35.76%
Bordered Table

Add class .table-borderedin table tag for borders on all sides of the table and cells.

Task Progress Deadline Action
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015
Striped Table

Add class .table-stripedin table tag.

Task Progress Deadline Action
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015
Large table

Add class .table-lgto make tables more compact by cutting cell padding in half.

Task Deadline Action
Lunar probe project May 15, 2015
Dream successful plan July 1, 2015
Office automatization Apr 12, 2015
Small table

Add class .table-smto make tables more compact by cutting cell padding in half.

Task Deadline Action
Lunar probe project May 15, 2015
Dream successful plan July 1, 2015
Office automatization Apr 12, 2015
Responsive Table

Create responsive tables by wrapping any table in .table-responsiveclass.

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2016 $45.00
Paid
EN
Order #58746 Mary Adams Oct 12, 2016 $245.30
Pending
CN
Order #98458 Caleb Richards May 18, 2016 $38.00
Shipped
AU
Order #32658 June Lane Apr 28, 2016 $77.99
Paid
FR
Breakpoint specific

Use table-responsive{-sm|-md|-lg|-xl}as needed to create responsive tables up to a particular breakpoint.

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2016 $45.00
Paid
EN
Order #58746 Mary Adams Oct 12, 2016 $245.30
Pending
CN
Order #98458 Caleb Richards May 18, 2016 $38.00
Shipped
AU
Order #32658 June Lane Apr 28, 2016 $77.99
Paid
FR
Table flush

Add class .table-flushin table tag.

Task Progress Deadline Action
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015
Contextual Classes

Use classes ( .active, .success, .info, .warning, .danger )to color table rows or individual cells.

# Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content
Dark table

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
Table Color Variations

Use classes ( .active, .success, .info, .warning, .danger )to color table rows or individual cells.

# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer
# First Name Last Name Username Role
1 Jens Brincker Brincker123 admin
2 Mark Hay Hay123 member
3 Anthony Davie Davie123 developer