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.
Contextual text classes can also be used on links, which will add a darker hover color:
Example
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
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.
Did You Know?
W3.CSS is an excellent alternative to Bootstrap.
W3.CSS is smaller, faster, and easier to use.
