Webdesign, UX/UI Kit

Background colors

darkest

darker

bg

lighter

lightest

darkest

darker

bg

lighter

lightest

Body colors

class variable
Text contrast higher text-contrast-higher var(--bs-text-contrast-higher);
Text contrast high text-contrast-high var(--bs-text-contrast-high);
Text contrast medium text-contrast-medium var(--bs-text-contrast-medium);
Text contrast low text-contrast-low var(--bs-text-contrast-low);
Text contrast lower text-contrast-lower var(--bs-text-contrast-lower);

Theme colors

text-primary

text-primary-emphasis

bg-primary

bg-primary-subtle

border-primary-subtle

text-secondary

text-secondary-emphasis

bg-secondary

bg-secondary-subtle

border-secondary-subtle

text-success

text-success-emphasis

bg-success

bg-success-subtle

border-success-subtle

text-info

text-info-emphasis

bg-info

bg-info-subtle

border-info-subtle

text-warning

text-warning-emphasis

bg-warning

bg-warning-subtle

border-warning-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>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
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?

Badges

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Buttons

Shadows

Shadow-sm
Shadow
Shadow-lg
Shadow & Lift

Shapes

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

Spacing

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