The Bootstrap color classes for different elements
In this tutorial, I am going to show you examples of built-in Bootstrap color classes for various elements. The Bootstrap has specific classes for coloring the text, links, buttons etc.
text example background links navbar
Generally, the class names use the context that may reflect the purpose of the text or some other element. For example, as using the red colored text or button, the class name contains the word “–danger” reflecting some dangerous or critical information or action. Similarly, -warning is the orange color for the context where you are alarming a visitor for certain action.
In the same way, Bootstrap 4 has the standard pattern for using class names e.g. –success, -primary, -secondary, -light, -dark, -warning etc.
These names are preceded by element’s names or shortcodes. For example, text- for text, btn- for buttons, bg- for backgrounds.
In the last section, you can also see an example of setting navbar colors.
Bootstrap 4 classes for coloring text
First, have a look at the example of all built-in classes for coloring the simple text in Bootstrap 4.
See online demo and code
The markup for coloring text:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p class="text-primary">For Bluish text: .text-primary class</p> <p class="text-secondary">Grayish text: .text-secondary class</p> <p class="text-success">For the green text: .text-success</p> <p class="text-danger">For red colored text: .text-danger</p> <p class="text-warning">Orange text: .text-warning</p> <p class="text-info">Light blue text: .text-info class</p> <p class="text-light bg-dark">Light colored text with dark background .text-light</p> <p class="text-dark">dark text: .text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">White colored text: .text-white</p> |
The following classes for coloring the text are available:
- text-dark /*Blackish*/
- text-white
- text-light
- text-primary /*The standard blue color*/
- text-secondary /*Grayish color*/
- text-warning /*Orange color*/
- text-success /* Green Color */
- text-danger /*Red color*/
- text-info /*Light blue color*/
- text-muted
Using background color contextual classes example
Similarly, you may use the background color standard classes for setting the background of various elements.
The following example shows using the contextual background color classes in paragraphs, div and different headings (h1-h6) elements. Along with background color, the contextual text color classes are also used.
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p class="p-3 mb-2 bg-primary text-warning">.bg-primary for blue background in a paragraph</p> <h1 class="p-2 bg-warning text-success">.bg-warning for orange background in H1 heading</h1> <h2 class="p-2 bg-info text-light">.bg-info in heading 2 with light blue background</h2> <h3 class="p-2 bg-light text-success">.bg-light</h3> <h4 class="p-4 bg-dark text-white">.bg-dark</h4> <h6 class="p-4 bg-white text-primary">.bg-white</h6> <p class="p-3 mb-2 text-white bg-secondary">.bg-secondary</p> <div class="p-3 mb-2 bg-success text-light">.bg-success</div> <p class="p-3 mb-2 bg-danger text-white">.bg-danger: For red color background with white text in paragraph</p> |
Until now, you can see the pattern of coloring in Bootstrap. We have seen, the text can be colored by using contextual names by using text-[context class]. Similarly, replace the “text” by “bg” for setting the background colors.
The buttons can also be colored in the same way in Bootstrap. Just replace the “text” or “bg” in above classes by “btn” and the same standard colors will be applied to buttons.
The following button classes are available in Bootstrap version 4:
- btn-primary
- btn-secondary
- btn-success
- btn-info
- btn-light
- btn-dark
- btn-danger
- btn-warning
See a demo online by clicking the link below for normal sized buttons:
See online demo and code
Learn more about the Bootstrap 4 buttons with 15 examples.
Coloring the list items example
Just like the text, backgrounds, and buttons standard built-in classes, the pattern that can be used for coloring the list items is similar.
Use the contextual Bootstrap 4 classes for creating lists with colors as follows:
- list-group-item-primary
- list-group-item-danger
- list-group-item-success
- list-group-item-info
- list-group-item-secondary
- list-group-item-warning
- list-group-item-dark
- list-group-item-light
See the example of using these classes:
See online demo and code
You can see the detailed tutorial of Bootstrap list here: Bootstrap 4 lists
Coloring the links example
If you want to color the links by using Bootstrap classes then simply assign the contextual text classes to the <a> tags. For example:
<a href=”https://www.jquery-az.com/” class=”text-primary”>Blue color link</a>
See an example where I used all available text classes for creating links with colors:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<h3>Bootstrap 4 link colors</h3> <div><a href="https://www.jquery-az.com" class="text-primary">Class Name: text-primary</a></div> <div><a href="https://www.jquery-az.com" class="text-secondary">Class Name: text-secondary</a></div> <div><a href="https://www.jquery-az.com" class="text-white bg-dark">Class Name: text-white</a></div> <div><a href="https://www.jquery-az.com" class="text-success bg-warning">Class Name: text-success</a></div> <div><a href="https://www.jquery-az.com" class="text-info">Class Name: text-info</a></div> <div><a href="https://www.jquery-az.com" class="text-light bg-dark">Class Name: text-light</a></div> <div><a href="https://www.jquery-az.com" class="text-dark">Class Name: text-dark</a></div> <div><a href="https://www.jquery-az.com" class="text-muted">Class Name: text-muted</a></div> <div><a href="https://www.jquery-az.com" class="text-danger">Class Name: text-danger</a></div> <div><a href="https://www.jquery-az.com" class="text-warning bg-info">Class Name: text-warning</a></div> |
You can see, in a few links the background color classes are also used.
Using text and background colors in Bootstrap 4 table example
Though, Bootstrap 4 has built-in contextual classes for coloring the table headers (thead-dark or thead-light) and table rows by using contextual classes etc.
You may also use the background and text color classes in the table as well. In the following example, the background color is set at the table level that applies to the whole table. The color of the text is also set by using text contextual class.
Besides, the table header is given a separate background and text color. Have a look:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<table class="table table-hover bg-info text-warning table-bordered"> <thead class="bg-danger text-white"> <tr> <th>Month</th> <th>Number of Sales</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <th scope="row">Jan</th> <td >105</td> <td>$15,000.00</td> </tr> <tr> <th scope="row">Feb</th> <td>95</td> <td>$12,000.00</td> </tr> <tr> <th scope="row">Mar</th> <td>150</td> <td>$20,000.00</td> </tr> <tr> <th scope="row">Apr</th> <td>50</td> <td>$30,000.00</td> </tr> <tr> <th scope="row">May</th> <td>80</td> <td>$15,000.00</td> </tr> <tr> <th scope="row">Jun</th> <td>110</td> <td>$22,000.00</td> </tr> </tbody> </table> |
For learning more about the table’s contextual classes and other features, visit the Bootstrap 4 tables tutorial.
You may use the background color classes for setting the background of navbar in Bootstrap 4. For that, simply use the background class in the <nav> tag containing your navigation bar. For example:
<nav class=”navbar navbar-expand-lg navbar-light bg-warning”>
Have a look at this demo online navbars:
See online demo and code
Just copy/paste the code into your editor to see the full view of navbars.