Table coloring

Activity Messages FAQ Support

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
2 .bg-gray 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
9 .bg-pink Column content
10 .bg-purple Column content
11 .bg-brown Column content
12 .bg-cyan Column content
13 .bg-yellow Column content
Pale background

bg-pale-* utility class applies to tr.

# Class name Column heading
1 .bg-pale-secondary Column content
2 .bg-pale-gray Column content
3 .bg-pale-dark Column content
4 .bg-pale-primary Column content
5 .bg-pale-info Column content
6 .bg-pale-success Column content
7 .bg-pale-warning Column content
8 .bg-pale-danger Column content
9 .bg-pale-pink Column content
10 .bg-pale-purple Column content
11 .bg-pale-brown Column content
12 .bg-pale-cyan Column content
13 .bg-pale-yellow 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