Bootstrap Colors

Bootstrap has some contextual classes that can be used to provide "meaning through colors".

By using utility classes you can change the color of the text. It can also be used to links and will darken on hover just like our default link styles.

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 -

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 -

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 -