Color
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Color on BootstrapColors
<p class="text-primary">text-primary</p>
<p class="text-secondary">text-secondary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>text-primary
text-secondary
text-success
text-info
text-warning
text-danger
Opacity
Color opacity allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Consider our default .text-primary utility.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}Example
<div class="text-primary mb-1">This is default primary text</div>
<div class="text-primary mb-1" style="--bs-text-opacity: .5;">This is 50% opacity primary text using inline css</div>
<div class="text-primary text-opacity-75 mb-1">This is 75% opacity primary text using utility class</div>
<div class="text-primary text-opacity-50 mb-1">This is 50% opacity primary text using utility class</div>
<div class="text-primary text-opacity-25 mb-1">This is 25% opacity primary text using utility class</div>This is default primary text
This is 50% opacity primary text using inline css
This is 75% opacity primary text using utility class
This is 50% opacity primary text using utility class
This is 25% opacity primary text using utility class