General

Colors

Light theme

darkest

darker

bg

lighter

lightest

Text contrast higher Text contrast high Text contrast medium Text contrast low Text contrast lower

Dark theme

darkest

darker

bg

lighter

lightest

Text contrast higher Text contrast high Text contrast medium Text contrast low Text contrast lower

Theme colors

bg-primary

bg-primary-subtle

text-primary

text-primary-emphasis

bg-success

bg-success-subtle

text-success

text-success-emphasis

bg-danger

bg-danger-subtle

text-danger

text-danger-emphasis

bg-primary

bg-primary-subtle

text-primary

text-primary-emphasis

bg-success

bg-success-subtle

text-success

text-success-emphasis

bg-danger

bg-danger-subtle

text-danger

text-danger-emphasis

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 Success Danger
Primary Success Danger
Primary Success Danger

Buttons

btn-{size}
btn-{color}
disabled
lift and shadow-{color}
bg-gradient
btn-outline-{color}
disabled
subtle
socials-{name}
btn-icon

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

Straight horizontal 1

placeholder

Curve vertical

placeholder

Angle vertical