Table coloring
THIS MONTH
$12,125
LAST YEAR
$22,754
Primary Table
To use add class .bg-primary in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Success Table
To use add class .bg-success in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Info Table
To use add class .bg-info in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Warning Table
To use add class .bg-warning in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Danger Table
To use add class .bg-danger in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Inverse Table
To use add class .bg-inverse in the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Primary Table
To use add class .bg-primary in the <thead> and add class .b-1 .border-primary in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Success Table
To use add class .bg-success in the <thead> and add class .b-1 .border-success in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Info Table
To use add class .bg-info in the <thead> and add class .b-1 .border-info in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Warning Table
To use add class .bg-warning in the <thead> and add class .b-1 .border-warning in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Danger Table
To use add class .bg-danger in the <thead> and add class .b-1 .border-danger in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Inverse Table
To use add class .bg-dark in the <thead> and add class .b-1 .border-dark in <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Background colors
Solid background
bg-* utility class applies to tr.
| # | Class name | Column heading |
|---|---|---|
| 1 | .bg-secondary | Column content |
| 3 | .bg-dark | Column content |
| 4 | .bg-primary | Column content |
| 5 | .bg-info | Column content |
| 6 | .bg-success | Column content |
| 7 | .bg-warning | Column content |
| 8 | .bg-danger | Column content |
Table row borders
You can use border utility classes on <tr> elements.
| # | Class name | Column heading | Column heading |
|---|---|---|---|
| 1 | .bt-3 | Column content | Column content |
| 2 | .bl-3 | Column content | Column content |
| 3 | .br-3 | Column content | Column content |
| 4 | .bb-3 | Column content | Column content |