Colors

To add to these items, add and override colors in _colors.scss:$theme-colors(). See Bootstrap's docs for more.

rgb(46, 51, 68)

primary

Usage:

$theme-colors(primary);

Luminance: 51.1644

rgb(83, 97, 144)

secondary

Usage:

$theme-colors(secondary);

Luminance: 97.417

rgb(82, 144, 139)

success

Usage:

$theme-colors(success);

Luminance: 130.4578

rgb(45, 115, 170)

info

Usage:

$theme-colors(info);

Luminance: 104.089

rgb(195, 187, 74)

warning

Usage:

$theme-colors(warning);

Luminance: 180.5422

rgb(119, 69, 67)

danger

Usage:

$theme-colors(danger);

Luminance: 79.4856

rgb(248, 249, 250)

light

Usage:

$theme-colors(light);

Luminance: 248.8596

rgb(34, 38, 51)

dark

Usage:

$theme-colors(dark);

Luminance: 38.0882

Text Color

Colors can also be used with text classes. _colors.scss:$theme-colors() is again the go-to here. text-white and text-black are available by default.

text-primary: <p class="text-primary">text-primary </p>

text-secondary: <p class="text-secondary">text-secondary </p>

text-success: <p class="text-success">text-success </p>

text-info: <p class="text-info">text-info </p>

text-warning: <p class="text-warning">text-warning </p>

text-danger: <p class="text-danger">text-danger </p>

text-light: <p class="text-light">text-light </p>

text-dark: <p class="text-dark">text-dark </p>

Background Colors

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

bg-primary:
<div class="bg-primary"></div>

bg-secondary:
<div class="bg-secondary"></div>

bg-success:
<div class="bg-success"></div>

bg-info:
<div class="bg-info"></div>

bg-warning:
<div class="bg-warning"></div>

bg-danger:
<div class="bg-danger"></div>

bg-light:
<div class="bg-light"></div>

bg-dark:
<div class="bg-dark"></div>