Bootstrap 5 Colors

Text Color

Bootstrap 5 has some context classes that can be used to provide 'some meaning expressed by color'.

Classes for text color are:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(default body color/usually black)
  • .text-light

Examples

Try It Yourself

You can also use .text-black-50 or .text-white-50 Add 50% opacity to text with black or white color classes:

Examples

Try It Yourself

Background Color

Classes for background colors are:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Please note that background color does not set text color, so in some cases, you need to use them with .text-* Use color classes together.

Examples

Try It Yourself