The text in Bootstrap can be made colorful using several colors. These colors are applied using the text color classes such as “text-primary”, “text-info”, “text-dark”, and many more. More specifically, the “text-muted” class is one of them. This Bootstrap class is used to apply a muted appearance to the element’s text.
This post will instruct you about:
- What is Bootstrap CSS “class: text-muted”?
- How to Add the Bootstrap “text-muted” Class to the HTML Element?
- How to Use the “text-muted” Class With Other Text Color Classes?
What is Bootstrap CSS “class: text-muted”?
The “text-muted” class is designed with the “color” property having the value ”#6c757d” (gray). This class is often used to make the text disappear into the background or to de-emphasize it.
How to Add the Bootstrap “text-muted” Class to the HTML Element?
Let’s understand it with the help of a practical example:
- Add a “<div>” element and assign it “card”, “w-50”, and “m-auto” classes.
- For the card header, specify the “card-header” class in the nested “<div>” element. Add the “<h1>” element to adjust the card heading.
- Then, create the card body by adding a container with the class “card-body”. Within this “<div>”, add the “<p>” element with the class “text-muted”.
- Finally, create the card footer using the class “card-footer” and add the “<p>” element with some text.
Here is the HTML code:
<div class="card-header">
lt;h1>Mr. William</h1>
</div>
<div class="card-body">
<p class="text-muted">Creative Software Engineer</p>
</div>
<div class="card-footer">
<p>contact: xxx-xxx-xxxx</p>
</div>
</div>
It is shown from the output that the card body’s text is muted, whereas the card footer’s text is the normal text:
How to Use the “text-muted” Class With Other Text Color Classes?
The “text-muted” class is added to the element you want to affect. It can also be applied along with other color classes. However, it will override the other text color classes.
Example
Let’s add the “text-danger” and the “text-muted” class in the ongoing example:
<p class="font-weight-bold text-danger text-muted">Creative Software Engineer</p>
</div>
Here:
- “font-weight-bold” class makes the font thick.
- “text-danger” class applies the red text color.
- “text-muted” class adds a subtle effect to the text.
Output
That’s all about the Bootstrap CSS class “text-muted”.
Conclusion
The Bootstrap CSS class “text-muted” is designed with the property “color” with the value “#6c757d”. This class is used to add text with a muted effect. To utilize it, specify the “text-muted” class to the element to which you want to apply the effect. This class can also be added with other text color classes. This article has explained the Bootstrap CSS class “text-muted” with examples.
