Bootstrap 4 provided classes you can use to add color depending on the context the element is being used in. Colors are the main source of conveying important information in website design.
The class names use the context that may show the purpose of the text or some other element. For example, as using the red-colored text, background or button, the class name contains the word “–danger” showing some dangerous or critical information or action. In the same way, -warning is the orange color for the context where you are alarming a visitor for certain actions. Likewise, Bootstrap 4 has the standard pattern for using class names e.g. –success, -primary, -secondary, -light, -dark, -warning, etc.
These class names may be element’s names or shortcodes. i.e. text- for text color, btn- for buttons color, bg- for backgrounds color.
Text Colors:
Bootstrap offers many classes to set the text color of an element. The text colors classes are as follows- .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body, .text-light.
You can also apply these bootstrap color classes to link text.
Background Colors:
Similar to the contextual text color classes, you can easily set the background of an element to any contextual class. The background colors classes are as follows- .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light.
Combining Classes:
For more flexibility, you can also use Bootstrap text color and background color classes combined. In below example, we take bg-success and text-black-50 property. In text-black-50 property by adding a third parameter, modify the opacity of bootstrap colors.
Button Color
Bootstrap contextual classes are also be used to color various page elements, such as buttons. For changing the color of Bootstrap button, you should apply a btn prefix for the chosen color class.