Contents
Use text color utilities to set text to a specific color.
Quick reference
| Class | |
|---|---|
text-primary | Aa |
text-discovery | Aa |
text-secondary | Aa |
text-success | Aa |
text-danger | Aa |
text-warning | Aa |
text-info | Aa |
text-light | Aa |
text-dark | Aa |
text-white | Aa |
text-black | Aa |
text-body | Aa |
text-body-secondary | Aa |
text-body-tertiary | Aa |
Basic usage
Setting the text color
Control the text color of an element using the text-{color} utilities.
The quick brown fox jumps over the lazy dog.
<p class="text-primary ...">The quick brown fox ...</p>
Changing the opacity
Control the opacity of an element’s text color using the color opacity text-opacity-* utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-primary text-opacity-100">The quick brown fox...</p>
<p class="text-primary text-opacity-75">The quick brown fox...</p>
<p class="text-primary text-opacity-50">The quick brown fox...</p>
<p class="text-primary text-opacity-25">The quick brown fox...</p>
<p class="text-primary text-opacity-0">The quick brown fox...</p>
Reset color
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
The quick brown fox jumps over The lazy dog.
<p class="text-secondary">The quick brown fox jumps over
<a href="#" class="text-reset">The lazy dog</a>
</p>
Edit this page on Github
Last updated on April 6, 2024