Table coloring

ActivityMessagesFAQSupport

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

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