layout | title | description | group | aliases | toc | |
---|---|---|---|---|---|---|
docs |
Colors |
Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too. |
utilities |
|
true |
When using .text-*
and .bg-*
utilities, contrasts are locked to ensure they meet WCAG 2.0 accessibility standards for color contrast, by defining color
and background-color
altogether. Please refer to [our theme colors]({{< docsref "/customize/color" >}}#all-colors) to have a full preview of Boosted color palette’s reached WCAG level.
Colorize text with color utilities. If you want to colorize links, you can use the [.link-*
helper classes]({{< docsref "/helpers/colored-links" >}}) which have :hover
and :focus
states.
{{< example >}}
.text-primary
.text-secondary
.text-light
.text-body
.text-muted
.text-white
{{< /example >}}{{< callout warning >}}
Deprecation: With the addition of .text-opacity-*
utilities and CSS variables for text utilities, .text-black-50
and .text-white-50
are deprecated as of v5.1.0. They'll be removed in v6.0.0.
{{< /callout >}}
{{< callout info >}} {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}}
{{< added-in "5.1.0" >}}
As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
Consider our default .text-primary
utility.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-text-rgb), var(--bs-text-opacity)) !important;
}
We use an RGB version of our $accessible-orange
(with the value of 241, 110, 0
) Sass variable as a CSS variable and attached a second CSS variable, --bs-text-opacity
, for the alpha transparency (with a default value 1
thanks to a local CSS variable). That means anytime you use .text-primary
now, your computed color
value is rgba(241, 110, 0, 1)
. The local CSS variable inside each .text-*
class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
When used in a dark variant context, --bs-primary-text-rgb
will use the value of $brand-orange
(with the value of 255, 121, 0
).
To change that opacity, override --bs-text-opacity
via custom styles or inline styles.
{{< example >}}
Or, choose from any of the .text-opacity
utilities:
{{< example >}}
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div>
or more semantic element with the desired class.
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
Most color
utilities are generated by our theme colors, reassigned from our generic color palette variables.
Boosted supersedes Bootstrap color variables with Orange brand color.
{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}
{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
Grayscale colors are also available, but only a subset are used to generate any utilities.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
And color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
Color utilities are declared in our utilities API in scss/_utilities.scss
. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-color" file="scss/_utilities.scss" >}}