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:
<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
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-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.
Source: linuxhint.com