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.

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.

Leave a Comment