Bootstrap

How Does Text Color Work in Bootstrap?

Bootstrap is a well-liked front-end development framework. It creates responsive and mobile-ready websites. This framework also provides many features, such as built-in classes for margin and padding, fade effect, and many more. Changing the text color of HTML elements is one of the essential features. To utilize it, all you need to do is to add the color class to the elements whose color you want to adjust.

This write-up will teach you how text color works in Bootstrap.

Bootstrap Text Color Classes

Bootstrap uses a bundle of classes to change the text color. Some of them are enlisted below:

Text Color Classes Description
text-success This class defines the green text color.
text-warning This class defines the yellow text color.
text-primary This class defines the blue text color.
text-light This class defines the gray text color.
text-info This class defines the light blue text color.
text-dark This class defines the dark gray text color.
text-danger This class defines the red text color.
text-secondary This class defines the light gray text color.

 
Let’s understand their work through practical demonstration.

How Does Text Color Work in Bootstrap?

To set the text color of the HTML element, assign a class to that particular element. For example, to change the color of the “<p>” element, add the color class to it, like this:

<div class=" rounded text-center ">
 <p class="text-secondary">Linuxhint</p>
 <p class="text-primary">Linuxhint </p>
 <p class="text-success">Linuxhint</p>
 <p class="text-warning">Linuxhint</p>
 <p class="text-danger">Linuxhint</p>
 <p class="text-info">Linuxhint</p>
 <p class="text-muted">Linuxhint</p>
 <p class="text-dark">Linuxhint</p>
</div>

 
In addition to the Bootstrap classes, you can also add CSS to the HTML elements. Let’s change the font size and style of the text using CSS.

Style “p” Element

p {
 font-family: fantasy;
 font-size: 25px;
 letter-spacing: .2em;
}

 
Following are the CSS properties that are applied to the “<p>” element:

    • font-family” defines the style of the font.
    • font-size” indicates the font size.
    • letter-spacing” specifies the space between the letters.

Output

How to Adjust the Background Color of the Text?

If you want to make the font color prominent, you can also change the background color of the elements. This can be done using the “bg-*” classes, where the asterisk “*” symbolizes the colors, such as “bg-dark”, “bg-warning”, and more.

Check out the following example that uses the Bootstrap classes to change the background and text colors of the element:

<p class="text-warning bg-dark">Linuxhint</p>
 <p class="text-info bg-warning">Linuxhint</p>
 <p class="text-muted bg-light">Linuxhint</p>
 <p class="text-dark bg-info">Linuxhint</p>

 
Output


This is how you can use the Bootstrap text color classes to change the element’s text color.

Conclusion

The text color works in Bootstrap by using several classes. These classes include “text-primary”, “text-info”, “text-light”, “text-dark”, “text-danger”, and more. These classes can be used according to the scenarios, such as the “text-success” class is utilized to show some success messages. This article has demonstrated how text color works in Bootstrap with examples.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.