BOOTSTRAP 4 COLORS
Bootstrap Colors
Bootstrap provides some classes that are color specific classes, which are used to specifically change the color of either text, background color, link style, or hover color.
These are also called contextual classes and are used to deliver certain meanings through the color of contents.
We will see color classes for 3 different use:
1. Bootstrap Text Color
Text color classes are used to set colors of text in bootstrap. Following are the color classes for text in bootstrap with their color value.
| Class Name | Color Value Of Text |
|---|---|
| .text-primary | #007bff |
| .text-secondary | #6c757d |
| .text-success | #28a745 |
| .text-warning | #ffc107 |
| .text-danger | #dc3545 |
| .text-info | #17a2b8 |
| .text-light | #f8f9fa |
| .text-dark | #343a40 |
| .text-muted | #6c757d |
| .text-white | #fff |
Example
<p class="text-primary">This is primary color.</p>
<p class="text-secondary">This is secondary color.</p>
<p class="text-success">This is success color.</p>
<p class="text-danger">This is danger color.</p>
<p class="text-warning">This is warning color.</p>
<p class="text-info">This is info color.</p>
<p class="text-light bg-dark">This is light color.</p>
<p class="text-dark">This is dark color.</p>
<p class="text-muted">This is muted color.</p>
<p class="text-white bg-dark">This is white color.</p>2. Bootstrap Anchor Color
The same classes that we used above also work fine for anchor tags (<a>). In addition to the text of color, it also provides hover color and focuses color to anchor tags.
Note: .text-muted and .text-white has no link style.
| Class Name | Link Text Color | hover and focus color |
|---|---|---|
| .text-primary | #007bff | #0062cc |
| .text-secondary | #6c757d | #545b62 |
| .text-success | #28a745 | #1e7e34 |
| .text-warning | #ffc107 | #d39e00 |
| .text-danger | #dc3545 | #bd2130 |
| .text-info | #17a2b8 | #117a8b |
| .text-light | #f8f9fa | #dae0e5 |
| .text-dark | #343a40 | #1d2124 |
Example
<a href="#" class="text-primary">Primary Link</a>
<a href="#" class="text-secondary">Secondary Link</a>
<a href="#" class="text-info">Info Link</a>
<a href="#" class="text-danger">Danger Link</a>
<a href="#" class="text-warning">Warning Link</a>
<a href="#" class="text-success">Success Link</a>
<a href="#" class="text-light">Light Link</a>
<a href="#" class="text-dark">Dark Link</a>3. Bootstrap Background Colors
Same as text color you can also set the background color of HTML elements using bootstrap. Bootstrap classes for background color are shown below.
You can also set text color for the text to be visible with such a background.
Note: You can also set .bg-* classes to the anchor tag. On anchor tags, you will get a hover effect for elements background.
.bg-primary
.bg-secondary
.bg-info
.bg-warning
.bg-danger
.bg-dark
.bg-success
.bg-light
.bg-white
Anchor tag Primary Color Anchor tag Warning Color Anchor tag Danger ColorExample
<p class="text-white bg-primary">.bg-primary</p>
<p class="text-white bg-secondary">.bg-secondary</p>
<p class="text-white bg-info">.bg-info</p>
<p class="text-white bg-warning">.bg-warning</p>
<p class="text-white bg-danger">.bg-danger</p>
<p class="text-white bg-dark">.bg-dark</p>
<p class="text-white bg-success">.bg-success</p>
<p class="bg-light">.bg-light</p>
<p class="bg-white">.bg-white</p>
<a href="#" class="text-white bg-primary">Anchor tag Primary Color</a>
<a href="#" class="text-white bg-warning">Anchor tag Warning Color</a>
<a href="#" class="text-white bg-danger">Anchor tag Danger Color</a>Conclusion
Bootstrap provides a wide range of classes to proved color combinations for your elements. You can use these classes to set color, background color, text color, border color, and more. You can also use these classes to set the hover effect for elements background.
Points to remember:
- Bootstrap color classes are used to give certain colors to HTML elements which define some information regarding the content.
- You can set text color, background color, anchor color with hover and focus effect on it.
