How to change text and background colors in Bootstrap 4

One way to make our websites or projects look attractive is to add some colors to them. The right choices of colors can be very important for efficiently conveying our messages.

Bootstrap 4 has some predefined contextual classes we can use to change the color of the text or the background of our elements.

These classes are divided into two main types:

1. Text colors or foreground colors
2. Background colors and gradients

1. Text colors

Here are the classes that can give different colors to our text to convey different messages.

Syntax

To use any of the above classes, we add the class inside the element tag. For instance, we can use the <p> or <h> tag. Here, we use the <h4> tag.

<h4> Important Text</h4>

Code example

Now, let’s discuss the different colors in Bootstrap through an example.

Explanation

• Lines 3 to 5: We place the Bootstrap dependencies between the head tags.
• Lines 7 to 20: We print some simple text in different colors in h4.

2. Background colors

Here are the classes we can use to add background colors in Bootstrap.

Syntax

To use any of the above classes, we add the desired class inside the element tag. Here, we use bg-primary.

<h5> Primary background</h5>

Code example

Explanation

• Line 14: We use the bg-dark class in combination with the text-white class. This gives us a dark grey background with white text.

Note: Background color classes do not have any impact on the text color. So, we can change the background and text colors simultaneously.