Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color

.text-* utilities are meant to modify text color, but also set a background-color to ensure contrasts. You may want to use .bg-* utilities to change background-color.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

<!-- Boosted mod -->

<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">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light">.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>
<!-- end mod -->

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

Boosted also handle color variation on hover (lighten or darken) depending on contrast ratio.

<!-- Boosted mod -->

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
<!-- end mod -->

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken or lighten on hover, just like the text classes. Background utilities do set color to ensure contrasts, so in some cases you’d want to use .text-* utilities to use another color.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<!-- Boosted mod -->

<div class="p-3 mb-2 bg-primary">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary">.bg-secondary</div>
<div class="p-3 mb-2 bg-success">.bg-success</div>
<div class="p-3 mb-2 bg-danger">.bg-danger</div>
<div class="p-3 mb-2 bg-warning">.bg-warning</div>
<div class="p-3 mb-2 bg-info">.bg-info</div>
<div class="p-3 mb-2 bg-light">.bg-light</div>
<div class="p-3 mb-2 bg-dark">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
<!-- end mod -->

Ensuring contrasts

Each of the text colors shown are combined with background colors from the Orange digital palette in order to meet WCAG accessibility standards for color contrast. You should refer to those tables when using .text-* and .bg-* utilities to ensure sufficient contrasts.

Core colors contrasts
Core colors Text color Pass level
#000 #ff7900 AAA
#fff AAA
#999 AAA
#fff #f16e00 AA Large text
#000 AAA
#666 AA
AAA Large text
#ff7900 #000 AAA
#f16e00 #fff AA Large text
#595959 #fff AAA
Functional greys contrasts
Functional greys Text color Pass level
#333 #fff AAA
#666 #fff AA
AAA Large text
#999 #000 AAA
#ccc #000 AAA
#ddd #000 AAA
#eee #000 AAA
Supporting colors contrasts
Supporting colors Text color Pass level
#4bb4e6 #000 AAA
#50beb7 #000 AAA
#ffb4e6 #000 AAA
#a885d8 #000 AAA
#ffd200 #000 AAA
Functional colors contrasts
Functional colors Text color Pass level
#32c832 #000 AAA
#527edb #000 AA
AAA Large text
#fff AA Large text
#fc0 #000 AAA
#cd3c14 #000 AA Large text
#fff AA
AAA Large text

Background gradient

When $enable-gradients is set to true (default is false), you can use .bg-gradient- utility classes. Learn about our Sass options to enable these classes and more.

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

Dealing with specificity

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> with the class.

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 .sr-only class.