Hit enter after type your search item

How to Colorize Text and Colors using Bootstrap 5 Color Utilities

Colorizing text and links using Bootstrap 5

Bootstrap 5 has utility classes for coloring text and links. In this tutorial, we will show you how to use those utility classes for text and link color.

Color utility classes available for text

The following utility classes are available for text color:

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-danger
  • .text-warning
  • .text-info
  • .text-light
  • .text-dark
  • .text-body
  • .text-muted
  • .text-white
  • .text-black-50
  • .text-white-50

An example of using text classes in paragraphs

In this example, each available text class is used in the paragraph. The sequence in the code and image below is different. Have a look:

Bootstrap5-text-color

Code:

Classes available for link coloring

The following utility classes are available for link colors:

  • link-primary
  • link-secondary
  • link-success
  • link-danger
  • link-warning
  • link-info
  • link-light
  • link-dark

Note: The link classes have :hover and :focus states.

An example of using link color utility classes in Bootstrap 5

In this example, we have all color classes for links that change on hover and focus state.

BS 5 Code:


Result:

Bootstrap5-link-color

References:

https://getbootstrap.com/docs/5.0/utilities/colors/

https://getbootstrap.com/docs/5.0/helpers/colored-links/

This div height required for enabling the sticky sidebar