Table Layout Coloured
Primary Table
To use add class .bg-primary .text-white 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 .text-white 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 .text-whit 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 .text-white 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 .text-white 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 .text-white in
the <thead>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Primary border Table
To use add class .bg-primary .text-white in
the <thead> and add class
.border .border-primary in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Success border Table
To use add class .bg-success .text-white in
the <thead> and add class
.border .border-success in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Info border Table
To use add class .bg-info .text-white in the
<thead> and add class
.border .border-info
in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Warning border Table
To use add class .bg-warning .text-white in
the <thead> and add class
.border .border-warning in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Danger border Table
To use add class .bg-danger .text-white in
the <thead> and add class
.border .border-danger
in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Dark border Table
To use add class .bg-dark .text-white in the
<thead> and add class
.border .border-dark
in
<tbody>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Nigam | Eichmann | @Sonu |
| 2 | Deshmukh | Prohaska | @Genelia |
| 3 | Roshan | Rogahn | @Hritik |
Light Primary Table
To use add class in the table
.table-hover .table-primary and add class
.bg-primary .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Light Success Table
To use add class in the table
.table-hover .table-success and add class
.bg-success .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Light Info Table
To use add class in the table
.table-hover .table-info and add class
.bg-info .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Light Warning Table
To use add class in the table
.table-hover .table-warning and add class
.bg-warning .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Light Danger Table
To use add class in the table
.table-hover .table-danger and add class
.bg-danger .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Dark Table
To use add class in the table
.table-hover .table-dark and add class
.bg-dark .text-white in the
<thead>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||