⭐️ If you like this product, please support us by starring our GitHub repository! Star ⭐️

Bootstrap 5 Text colors

Text colors

Use Bootstrap’s text color utility to apply colors to text elements and provide “meaning thorugh colors”. The text utility also supports styling links with hover states.

Text colors

Examples

Colorize text elements using the text color utility. The following text colors are available: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-black, .text-white-50, .text-white-50, .text-dark, .text-light and .text-body (matches the default body color).

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-black

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-black">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Specificity

You may not be able to apply the context class due to the peculiarities of another selector. In some cases, a good solution is to wrap the content of the element in a <div> or more semantic element with the desired class.