Basic tables

Basic tables

Basic table
Basic table with .table class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Striped rows table
Basic table with .table-striped class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Bordered table
Basic table with .table-bordered class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Hovered rows
Basic table with .table-hover class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann

Table Sizing

Extra large table
Basic table with .table-xlg class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Normal table
Basic table with .table class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Large table
Basic table with .table-lg class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Small table
Basic table with .table-xs class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann

Table borders

Vertical borders
Basic table with .table-columned class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Vertical & horizintal borders
Basic table with .table-bordered class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Borderless table
Basic table with .table-borderless class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann

Table styling

Table header styling
Custom table header color with .bg-* class added to the header row.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Contextual classes
Custom table with contextual classes added to individual table rows. To use contextual classes, add classes .success, .info, .warning, .danger to the individual table rows
# First Name Last Name Username Status
1 Jane Elliott #jane Active
2 Florence Douglas #florence Inactive
3 Eugine Turner #eugine Online
4 Ann Porter #ann Blocked
Color combination with dark header
Custom table color with class .bg-* added to .table class and .bg-*-800 to <thead> row.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Table footer styling
Custom table footer color with .bg-* class added to the footer row.
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
# First Name Last Name Username
Custom table color
Custom table color with class .bg-* added to .table class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann
Colored table options
Custom table with background color and added classes .table-striped and .table-hover with .table class.
# First Name Last Name Username
1 Jane Elliott #jane
2 Florence Douglas #florence
3 Eugine Turner #eugine
4 Ann Porter #ann