Bootstrap 5 Text Classes


Text utility classes are used to style and manipulate the appearance of text. These classes allow you to control various aspects of text, such as color, size, alignment, transformation, and more. Here are some commonly used text utility classes in Bootstrap 5:

Bootstrap 5 Text Color Classes

Apply different text colors based on Bootstrap's contextual color classes. Use classes like .text-primary, .text-secondary, .text-danger, etc., to set the text color for specific elements.

  • .text-primary : Sets the text color to the primary color defined in your Bootstrap theme.
  • .text-secondary : Sets the text color to the secondary color defined in your Bootstrap theme.
  • .text-success : Sets the text color to indicate success.
  • .text-danger : Sets the text color to indicate danger.
  • .text-warning : Sets the text color to indicate a warning.
  • .text-info : Sets the text color to indicate informational content.
  • .text-light : Sets the text color to a light color (usually for dark background elements).
  • .text-dark : Sets the text color to a dark color (usually for light background elements).
  • .text-muted : Sets the text color to a muted or faded style.
Example
<p class="text-primary">This is primary text.</p>
<p class="text-secondary">This is secondary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<p class="text-warning">This is warning text.</p>
<p class="text-info">This is info text.</p>
<p class="text-light">This is light text.</p>
<p class="text-dark">This is dark text.</p>
<p class="text-muted">This is muted text.</p>
Try it Yourself

Output: