DocHero
Lesson 10 +10 XP

Text Colors

Text Colors

Bootstrap 5 has contextual color classes that change the color of text. They follow a semantic meaning: success is green, danger is red, and so on.

The text color classes

ClassMeaningColor
.text-mutedMuted, subtle textgray
.text-primaryMain brand colorblue
.text-successSuccess messagegreen
.text-infoInformational messagelight blue
.text-warningWarning messageorange/yellow
.text-dangerDanger messagered
.text-secondarySecondary colorgray
.text-darkDark textdark
.text-lightLight textlight
.text-whiteWhite textwhite

Example

<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is blue.</p>
<p class="text-success">This text is green.</p>
<p class="text-danger">This text is red.</p>

Text opacity

Bootstrap 5 also supports opacity utilities:

  • .text-black-50 makes black text 50% opaque
  • .text-white-50 makes white text 50% opaque

TL;DR

  • Use .text-{color} to color text.
  • Colors carry meaning: success, warning, danger, info.
  • .text-muted creates subtle gray text.
  • Opacity helpers like .text-black-50 exist.