Learn Bootstrap 4: Utilities and Components
Adding Colors

Bootstrap utility classes provide an element with styling and purpose. Let’s get acquainted with utility classes by styling the color of our elements.

Let’s say we want to change the text color of our paragraph element from the default black to blue. We would add a class of "text-primary", like so:

<p class="text-primary">This text is blue!</p>

According to the documentation, the "text" portion of the class targets the element’s text styling. Appending "primary" after "text" changes the text color to blue. The name of the class, "text-primary", also signifies that this <p> element conveys information that appears first, i.e, is the primary text.

We could have used any of the classes provided in Bootstrap’s color example to change the text color of our <p> element.

Similarly, we can also change the background color:

<div class="bg-success"> Green! This signifies success! </div>

In the example above, we’ve assigned the <div> element a class of "bg-success". The "bg" part references the element’s background and "success" changes the background color to green. We can also tell from the name of the class that this <div> element is meant to be used when something happened/worked. We can find more background utility classes at Bootstrap’s background color examples.

To get the full range of what we can do with Bootstrap’s color utility classes, check out Bootstrap’s colors documentation. Now, let’s add some color to our own examples.



Change the text color of the <p> element to yellow by assigning its class a value of "text-warning".


Under the <p> element, there is a <div> element. Change the background color of the <div> element to teal by adding a class of "bg-info".


Locate the last unstyled <div> element and change the background color to green and the text color to white.

You’ll need to browse Bootstrap’s colors documentation to know which two classes to add!

Folder Icon

Sign up to start coding

Already have an account?