General

Background colors

darkest

darker

bg

lighter

lightest

darkest

darker

bg

lighter

lightest

Body colors

Contrast level Class
Text contrast higher text-contrast-higher
Text contrast high text-contrast-high
Text contrast medium text-contrast-medium
Text contrast low text-contrast-low
Text contrast lower text-contrast-lower
Contrast level class
Text contrast higher text-contrast-higher
Text contrast high text-contrast-high
Text contrast medium text-contrast-medium
Text contrast low text-contrast-low
Text contrast lower text-contrast-lower

Theme colors

text-primary

text-primary-emphasis

bg-primary

bg-primary-subtle

border-primary-subtle

text-accent

text-accent-emphasis

bg-accent

bg-accent-subtle

border-accent-subtle

text-success

text-success-emphasis

bg-success

bg-success-subtle

border-success-subtle

text-danger

text-danger-emphasis

bg-danger

bg-danger-subtle

border-danger-subtle

text-light

text-light-emphasis

bg-light

bg-light-subtle

border-light-subtle

text-dark

text-dark-emphasis

bg-dark

bg-dark-subtle

border-dark-subtle

Typography

display-1

Display 1

Display 2

Display 3

Display 4

Display 5
Display 6
<h1>

Bootstrap heading 1

Bootstrap heading 2

Bootstrap heading 3

Bootstrap heading 4

Bootstrap heading 5
Bootstrap heading 6
<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil. This is a link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil.

<p class="lead">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, at?

Spacing

1
.
2
.
3
.
4
.
5
.
6
.
7
.
8
.

Components

Avatars

avatar xl
avatar lg
avatar
avatar sm

Badges

Primary Accent Success Danger Light Dark
Primary Accent Success Danger Light Dark
Primary Accent Success Danger Light Dark

Buttons

Shadows

Shadow-sm
Shadow
Shadow-lg
Shadow & Lift

Shapes

components/_shapes.scss

placeholder

Curve horizontal 1

placeholder

Curve horizontal 2

placeholder

Curve horizontal 3

placeholder

Angle horizontal 1

placeholder

Wave horizontal 1

placeholder

Curve vertical

placeholder

Angle vertical