Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap 4
colors
communitycreator
text color
background color

How to change text and background colors in Bootstrap 4

Salman Yousaf

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.

Text colors

Classes

Primary text

.text-primary

Secondary text

.text-secondary

Success

.text-success

Warning

.text-warning

Danger/Alert

.text-danger

Dark

.text-dark

White

.text-white

Light

.text-light

Information

.text-info

Body

.text-body

Muted

.text-muted

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 class="text-primary"> Important Text</h4>

Code example

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

  • HTML

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.

Background Colors

Classes

Primary background

.bg-primary

Secondary background

.bg-secondary

Success background

.bg-success

Warning background

.bg-warning

Danger/alert background

.bg-danger

Dark background

.bg-dark

Light background

.bg-light

Information background

.bg-info

Syntax

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


<h5 class="bg-primary"> Primary background</h5>

Code example

  • HTML

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.

RELATED TAGS

bootstrap 4
colors
communitycreator
text color
background color
RELATED COURSES

View all Courses

Keep Exploring