Tables
Table classes
Class Description
.table Default table styling
.table-striped Different background for even rows
.table-bordered Default bordered table
.table-bordered .table-block Removing borders if table is in well block
.table-hover Change background color for rows on hover
.table-condensed Smaller padding
.table-checks Table with checkboxes
.table-tabs Table inside tabs. Should be applied for parent div
div.table-footer Footer for static tables. Goes after table
.table-bordered .table-gradient Light gradient for table rows
.table-transparent Table without borders and background
Default table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered table
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered inside content
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Hover cells table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Condensed table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Transparent table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table colors options
Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
Default table
# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
Default datatable
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table with footer
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
With gradient
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table with checkboxes
Column name Column name Column name Column name Column name
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Table with toolbar
Column name Column name Column name Column name Column name
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Row 1 Row 2 Row 3 Row 4 Row 5
Inside tabs
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
With navbar elements
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table elements
Labels Icons Progress bars Actions Font Awesome Font Awesome btns
In progress
Error
Done