Bootstrap 5 Background Colors

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.

Example

Try it Yourself »

The .bg-color classes above does not work well with text, or atleast then you have to specify a proper .text-color class to get the right text color for each background.

However, you can use the .text-bg-color classes and Bootstrap will automatically handle the appropriate text color for each background color:

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 »

❮ Previous Next ❯