BS4 Colors
Text Colors
Contextual classes from Bootstrap 4 can be used to provide “meaning through colors”.
.Text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black), and .text-light are the classes for text colors:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Links can also be used with contextual text classes, which will add a darker hover color:
Example
With the .text-black-50 or .text-white-50 classes, you may additionally apply 50% opacity to black or white text:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Background Colors
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light are the classes for background colors.
Keep in mind that background colors do not change the text color, so you may wish to combine them with a .text-* class in some situations.
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
