Bootstrap 4 Colors
Text Colors
Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .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:
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.
Light grey text.
Try it Yourself »
Contextual text classes can also be used on links, which will add a darker hover color:
Example
Muted link.
Primary link.
Success link.
Info link.
Warning link.
Danger link.
Secondary link.
Dark grey link.
Body/black link.
Light grey link.
Try it Yourself »
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Try it Yourself »
Background Colors
The classes for background colors are: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.
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.
Try it Yourself »
