Text Color Classes
Bootstrap 5 classes that are linked to text colors help in providing meaning to the text. These classes are referred to as color utility classes and are also used to style links with hover states.
All of the classes related to text color along with the meaning these convey are explained here.
It gives a blue color to the text and represents an important piece of text.
It provides a gray color to the text and represents secondary text.
This class gives a green color to the text and represents success.
As the name suggests, this class indicates danger and gives a red color to the text.
It provides a yellow color to the text and indicates a warning.
This class is used to represent a piece of information and provide a lighter shade of blue to the text.
It gives a light gray color to the text.
This class gives a dark gray color to the text.
It provides color to the body of the text which is black by default.
It represents a muted text and gives it a light gray color.
As the name represents, this class provides a white color to the text.
Now we will demonstrate all of these colors through an example so that you can learn how to use them.
Consider the example below.
<p class="text-secondary">Text with gray color.</p>
<p class="text-info">This is an important information</p>
<p class="text-light bg-dark">Hello World!</p>
<p class="text-dark">This is a dark themed text</p>
<p class="text-body">This is body text</p>
<p class="text-muted">This text is muted</p>
<p class="text-white bg-dark">This is a text with white color</p>
In the above code, we have simply created multiple <p> elements and assigned each paragraph a different text color class.
All text color classes were demonstrated successfully.
Adding opacity to the text
There are two classes associated with text color in Bootstrap 5 that add opacity to the text. These are explained below.
This represents a black colored text having 50% opacity with a white background.
This represents a white colored text having 50% opacity with a black background.
Let’s see an example.
In the example below we are adding opacity to the text using the above mentioned classes.
Here we are assigning both the paragraphs a different class to add opacity to the text present inside those paragraphs. You must have also noticed that in this example and the example above we have given a black background color to the elements using a background color class. The background color classes in Bootstrap 5 have been discussed in the upcoming section.
Opacity was successfully added to the text.
Background Color Classes
The background color classes in Bootstrap 5 provide color to the elements. The names of these classes are similar to the text color color classes with the only difference that the prefix “bg” is used for the classes associated with background colors.
Keep this in mind that these classes provide background color to elements, not the text. All the classes associated with the background color are explained with an example demonstrated below.
Consult the example below to understand background color classes in Bootstrap 5.
<p class="bg-secondary">Text with gray color.</p>
<p class="bg-info">This is an important information</p>
<p class="bg-light">Hello World!</p>
<p class="bg-dark text-white">This is a dark themed text</p>
<p class="bg-white">This is a text with white color</p>
In the above code, we have created multiple paragraphs and added a different background color to each.
Background colors were successfully added to the paragraphs.
Color classes in Bootstrap 5 provide color to the text as well as deliver a certain meaning regarding the text. Meanwhile, the classes associated with background color provide color to the background of elements. Classes linked to text and background have similar names with different prefixes. For text color classes the prefix is .text-, meanwhile, for background color classes the prefix is .bg-. This post discusses each of the class categories in detail along with appropriate examples.