Text Colors
Bootstrap 5 Colors
Contextual classes from Bootstrap 5 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.
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
Text does not work well with the aforementioned .bg-color classes; at the very least, you need to specify a proper .text-color class in order to get the appropriate text color for each backdrop.
But if you use the .text-bg-color classes, Bootstrap will take care of choosing the right text color for each backdrop color for you:
Example
