Bootstrap Colors

Colors help you present the context based on their distinctiveness.

There might be a red colored warning, a light brown <div> with some side note etc.

In this post we will study how Bootstrap controls the colors and used them to convey meaning better.

Utility Classes

Bootstrap has a list of utility classes for different color templates for text content in the websites.

This also includes the support for styling your link elements for hover and other states. Let’s take a look:

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-danger
  • .text-warning
  • .text-info
  • .text-light
  • .text-dark
  • .text-muted
  • .text-white

The code below gives a simple illustration of using these classes with the text content.

Run

You can use the same contextual text classes to work on anchors. You can style these anchors for hover and focus states.

Please note, that the .text-white and .text-muted classes are not used for this purpose. See the code below for more:

Run

Just like the text content, we have contextual classes for controlling the background colors too. Here too, the anchor elements will get darker on hover. In some cases you might want to use the .text-* classes as well for proper display. Check out the code to know more:

Background color

.bg-primary

Run

Background gradient

Background gradient can be controlled by its own set of utility classes. For this, the $enable-gradients should be set to true.

Once that’s done, you can use the .bg-gradient- utility classes. However, by default, $enable-gradients is set to false.

The code we are using in the example below is broken. We have intentionally done this for easier customization.

You can learn more about the Sass operation and enable these classes.

Dealing with specificity

There might come instances where contextual classes may not be applied because of the specificity of another selector.

In such cases wrapping your element’s content in a <div> with the class proves to be a helpful workaround.

Conveying meaning to assistive technologies

To convey the meaning of the content to the assistive technologies mere colors might not be that effective.

You need to ensure that whatever information the colors are denoting is either obvious from your content itself or there are alternative means to include it.