Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

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

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

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

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

Hoverable rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

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

Dark table

Your awesome text goes here.

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

Use contextual classes to color table rows or individual cells.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
4MarkOtto@mdo
5JacobThornton@fat
6Larrythe Bird@twitter
7JacobThornton@fat
8Larrythe Bird@twitter
9JacobThornton@fat
10Larrythe Bird@twitter
Captions Table

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
© 2019 Annex by Mannatthemes.