Convey meaning through
color with a handful of color utility classes. Includes support for styling links with hover states, too.
Colorize text with color utilities. If you want to colorize links, you can use the
.link-* helper classes which have
<p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning bg-dark">.text-warning</p> <p class="text-info bg-dark">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
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 (aka CSS variables) for colors and more.
Do you need a gradient in your custom CSS? Just add
color utilities are generated by our theme colors, reassigned from our generic color palette variables.
$blue: #0d6efd; $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; $red: #dc3545; $orange: #fd7e14; $yellow: #ffc107; $green: #198754; $teal: #20c997; $cyan: #0dcaf0;
$primary: $blue; $secondary: $gray-600; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; $light: $gray-100; $dark: $gray-900;
Grayscale colors are also available, but only a subset are used to generate any utilities.
$white: #fff; $gray-base: #3c4b64; $gray-100: #ebedef; $gray-200: #d8dbe0; $gray-300: #c4c9d0; $gray-400: #b1b7c1; $gray-500: #9da5b1; $gray-600: #8a93a2; $gray-700: #768192; $gray-800: #636f83; $gray-900: #4f5d73; $black: #000015;
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );
Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.
$grays: ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 );
Color utilities are declared in our utilities API in
scss/_utilities.scss. Learn how to use the utilities API.
"color": ( property: color, class: text, values: map-merge( $theme-colors, ( "white": $white, "body": $body-color, "muted": $text-muted, "black-50": rgba($black, .5), "white-50": rgba($white, .5), "reset": inherit, "high-emphasis-inverse": $text-high-emphasis-inverse, "medium-emphasis-inverse": $text-medium-emphasis-inverse, "disabled-inverse": $text-disabled-inverse, "high-emphasis": $text-high-emphasis, "medium-emphasis": $text-medium-emphasis, "disabled": $text-disabled ) ), vars: true ),