Colors
Color
Text primary color.
Text secondary color.
Text success color.
Text danger color.
Text warning color.
Text info color.
Text light color with background dark color.
Text dark color.
Text body color.
Text muted color.
Text white color with background dark color.
Text white-50 color with background dark color.
Text black-50 color.
<p class="text-primary">Text primary color.</p>
<p class="text-secondary">Text secondary color.</p>
<p class="text-success">Text success color.</p>
<p class="text-danger">Text danger color.</p>
<p class="text-warning">Text warning color.</p>
<p class="text-info">Text info color.</p>
<p class="text-light bg-dark">Text light color with background dark color.</p>
<p class="text-dark">Text dark color.</p>
<p class="text-body">Text body color.</p>
<p class="text-muted">Text muted color.</p>
<p class="text-white bg-dark">Text white color with background dark color.</p>
<p class="text-white-50 bg-dark">Text white-50 color with background dark color.</p>
<p class="text-black-50">Text black-50 color.</p><p class="text-primary">Text primary color.</p>
<p class="text-secondary">Text secondary color.</p>
<p class="text-success">Text success color.</p>
<p class="text-danger">Text danger color.</p>
<p class="text-warning">Text warning color.</p>
<p class="text-info">Text info color.</p>
<p class="text-light bg-dark">Text light color with background dark color.</p>
<p class="text-dark">Text dark color.</p>
<p class="text-body">Text body color.</p>
<p class="text-muted">Text muted color.</p>
<p class="text-white bg-dark">Text white color with background dark color.</p>
<p class="text-white-50 bg-dark">Text white-50 color with background dark color.</p>
<p class="text-black-50">Text black-50 color.</p>
Opacity
Utility class
25%
50%
75%
100%
CSS custom property
20%
40%
60%
80%
<h4 class="h5 text-muted mt-3">Utility class</h4>
<p class="text-body text-opacity-25">25%</p>
<p class="text-body text-opacity-50">50%</p>
<p class="text-body text-opacity-75">75%</p>
<p class="text-body text-opacity-100">100%</p>
<h4 class="h5 text-muted mt-3">CSS custom property</h4>
<p class="text-body" style="--bs-text-opacity: .2">20%</p>
<p class="text-body" style="--bs-text-opacity: .4">40%</p>
<p class="text-body" style="--bs-text-opacity: .6">60%</p>
<p class="text-body" style="--bs-text-opacity: .8">80%</p><h4 class="h5 text-muted mt-3">Utility class</h4>
<p class="text-body text-opacity-25">25%</p>
<p class="text-body text-opacity-50">50%</p>
<p class="text-body text-opacity-75">75%</p>
<p class="text-body text-opacity-100">100%</p>
<h4 class="h5 text-muted mt-3">CSS custom property</h4>
<p class="text-body" style="--bs-text-opacity: .2">20%</p>
<p class="text-body" style="--bs-text-opacity: .4">40%</p>
<p class="text-body" style="--bs-text-opacity: .6">60%</p>
<p class="text-body" style="--bs-text-opacity: .8">80%</p>