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-sm
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 |
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-*-600
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 |