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 |
Table footer styling
Custom table footer color with
.bg-* class added to the footer row.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jane | Elliott | #jane |
| 2 | Florence | Douglas | #florence |
| 3 | Eugine | Turner | #eugine |
| 4 | Ann | Porter | #ann |
| # | First Name | Last Name | Username |
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 |
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 |
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 |
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 |