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