How To Change Text And Background Colors In Bootstrap 4

Home » Color Text Bootstrap » How To Change Text And Background Colors In Bootstrap 4

Maybe your like

ExploreEXPLORE THE CATALOGSupercharge your career with 700+ hands-on coursesView All CoursesPythonJavaJavaScriptCReactDockerVue JSRWeb DevDevOpsAWSC#LEARNING TOOLSExplore the industry's most complete learning platformCoursesLevel up your skillsSkill PathsAchieve learning goalsProjectsBuild real-world applicationsMock InterviewsNewAI-Powered interviewsPersonalized PathsGet the right resources for your goalsLEARN TO CODECheck out our beginner friendly courses.PricingFor BusinessResourcesNewsletterCurated insights on AI, Cloud & System DesignBlogFor developers, By developersFree CheatsheetsDownload handy guides for tech topicsAnswersTrusted answers to developer questionsGamesSharpen your skills with daily challengesSearchCoursesLog InJoin for freeHow 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.

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> Important Text</h4>

Code example

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

  • HTML
Run

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> Primary background</h5>

Code example

  • HTML
Run

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.

Relevant Answers

Explore Courses

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Tag » Color Text Bootstrap