Bootstrap Table

Default with only tableclass

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

With.table-dark

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Table head options

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Striped rows

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

With table table-striped table-dark

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Bordered table

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter

Borderless table

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

.table-borderless can also be used on dark tables.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Hoverable rows

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Small table

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Contextual classes

TypeColumn headingColumn headingColumn heading
ActiveColumn contentColumn contentColumn content
DefaultColumn contentColumn contentColumn content
PrimaryColumn contentColumn contentColumn content
SecondaryColumn contentColumn contentColumn content
SuccessColumn contentColumn contentColumn content
DangerColumn contentColumn contentColumn content
WarningColumn contentColumn contentColumn content
InfoColumn contentColumn contentColumn content
LightColumn contentColumn contentColumn content
DarkColumn contentColumn contentColumn content

Responsive tables

#Table headingTable headingTable headingTable headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell

Use .table-responsive{-sm|-md|-lg|-xl}

#Table headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cell