Bootstrap 4 Colors

Bootstrap 4 Colors
Bootstrap 4 Colors

Text Colors

Bootstrap 4 has some contextual classes that can be used to provide “meaning through color”.

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.

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.


Background Color

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.