Skip to main content

Colors in Bootstrap 5

Text Colors​

Bootstrap provides a set of classes that you can use to change the color of text. These classes are named according to the color they represent and can be used to change the text color of any element.

The available text color classes are:

  • 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 a green color indicating success.
  • text-danger: Sets the text color to a red color indicating danger or an error.
  • text-warning: Sets the text color to a yellow color indicating a warning.
  • text-info: Sets the text color to a blue color indicating information.
  • text-light: Sets the text color to a light color.
  • text-dark: Sets the text color to a dark color.
  • text-muted: Sets the text color to a muted gray color.

As an example:

Editor

Loading...

In this example:

  • We includes all of the text color classes available in Bootstrap, as well as some additional classes that affect text color (such as .bg-dark to set the background color to dark).

Background Colors​

Bootstrap provides a set of classes that you can use to change the background color of an element. These classes are named according to the color they represent and can be used to change the background color of any element.

The available background color classes are:

  • bg-primary: Sets the background color to the primary color defined in your Bootstrap theme.
  • bg-secondary: Sets the background color to the secondary color defined in your Bootstrap theme.
  • bg-success: Sets the background color to a green color indicating success.
  • bg-danger: Sets the background color to a red color indicating danger or an error.
  • bg-warning: Sets the background color to a yellow color indicating a warning.
  • bg-info: Sets the background color to a blue color indicating information.
  • bg-light: Sets the background color to a light color.
  • bg-dark: Sets the background color to a dark color.
  • bg-white: Sets the background color to white.
  • bg-transparent: Sets the background color to transparent.

As an example:

Editor

Loading...

In this example:

  • We have includes all of the background color classes available in Bootstrap, as well as some additional classes that affect text color (such as .text-white to set the text color to white).