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.
.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 bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.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>
<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 bg-dark">.text-warning</p> <p
class="text-warning-emphasis">.text-warning-emphasis</p> <p
class="text-info bg-dark">.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>
Opacity
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;
}
We use an RGB version of our --bs-primary (with the value of 13, 110, 253)
CSS variable and attached a second CSS variable, --bs-text-opacity, for the alpha
transparency (with a default value 1 thanks to a local CSS variable). That means anytime
you use .text-primary now, your computed color value is
rgba(13, 110, 253, 1). 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 --bs-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="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
<div class="text-primary">This is default primary text</div> <div
class="text-primary" style="--bs-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>
<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.