Basic Tables

Basic example

Add .table to table to get default table

id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table .table-bordered to table to get table with borders.

id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

There available 5 classes: active, success, info, warning, danger. Add it to TR tag.

id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
3 Larry the Bird @twitter
3 Larry the Bird @twitter

Striped rows

Add class .table-striped to table to get table striped rows.

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

Hover rows

Add class .table-hover to table to highlight row on hover.

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

Condensed table

Add class .table-hover to table to get condensed table.

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

Table in panel

Add class .panel-body-table to panel-body to remove paddings in panel and borders in table.

id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive tables

id name status amount date actions
1 John Doe New $430.20 24/09/2017
2 Dmitry Ivaniuk Pending $1,351.00 23/09/2017
3 Nadia Ali In Queue $2,621.00 22/09/2017

Many Columns

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12 Column 13 Column 14 Column 15 Column 16 Column 17 Column 18 Column 19 Column 20
Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1 Row 1
Remove Data ?

Are you sure you want to remove this row?

Press Yes if you sure.

Log Out ?

Are you sure you want to log out?

Press No if youwant to continue work. Press Yes to logout current user.