Table coloring
THIS MONTH
$12,125
LAST YEAR
$22,754
Primary Table
To use add class .bg-primaryin 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-successin 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-infoin 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-warningin 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-dangerin 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-inversein 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-primaryin the <thead>and add class .b-1 .border-primaryin <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-successin the <thead>and add class .b-1 .border-successin <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-infoin the <thead>and add class .b-1 .border-infoin <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-warningin <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-dangerin <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-darkin the <thead>and add class .b-1 .border-darkin <table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Backgroundcolors
Solid background
bg-*utility classapplies 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 classeson <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 |