Skip to main content

Utilities

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

View page source on GitHub
On this page

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Colors#

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

All color utilities respond to color modes. The six tinted .text-* colors use a darker tone of their theme color (--primary-text and friends) that reads as text on the page, so .text-warning and .text-info need no dark background. .text-light and .text-dark use the --light and --dark fills and are meant for text on a contrasting background; both are dark in dark mode.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

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

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Deprecated in Bootstrap: .text-black-50 and .text-white-50 are superseded by the .text-opacity-* utilities, and .text-muted by .text-body-secondary. felt-css keeps them for compatibility; .text-muted is the same color as .text-body-secondary.

Two more helpers: .text-reset makes an element inherit the color of its parent, and .text-white and .text-black set a fixed color in both color modes.

Opacity#

Text color utilities use CSS variables. This allows for real-time color changes and dynamic alpha transparency changes.

How it works#

Consider the default .text-primary utility.

.text-primary {
  --text-opacity: 1;
  color: color-mix(in srgb, var(--primary-text) calc(var(--text-opacity) * 100%), transparent) !important;
}

The color is faded with color-mix() by a second CSS variable, --text-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). The local CSS variable inside each .text-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Example#

To change that opacity, override --text-opacity via custom styles or inline styles.

This is default primary text
This is 50% opacity primary text
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--text-opacity: .5;">This is 50% opacity primary text</div>

Or, choose from any of the .text-opacity utilities:

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Specificity#

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> or more semantic element with the desired class.