Style guide for template

Source: _docs/bootstrap.css, line 8

1 Base

Colors we use for higlighting states. Colors palette

Source: _docs/bootstrap.css, line 68

1.1 Colors Palette

Colors we use for higlighting states.

theme

accent

primary

secondary

tertiary

success

info

warning

danger

light

dark

white

black

Source: _docs/bootstrap.css, line 87

1.2 Typography

Source: _docs/bootstrap.css, line 94

1.2.1 Colors

Text Colors variation documentation can be found Here

.text-c-theme

.text-c-accent

.text-c-primary

.text-c-secondary

.text-c-tertiary

.text-c-success

.text-c-info

.text-c-warning

.text-c-danger

.text-c-light

.text-c-dark

.text-c-white

.text-c-black

.text-c-body

.text-c-muted

.text-c-reset

Source: _docs/bootstrap.css, line 7644

1.2.1.1 Colors on hover

Text Colors variation when hover it
Hover your mouse in each block to see the variation of it

.hover-text-theme

.hover-text-accent

.hover-text-primary

.hover-text-secondary

.hover-text-tertiary

.hover-text-success

.hover-text-info

.hover-text-warning

.hover-text-danger

.hover-text-light

.hover-text-dark

.hover-text-white

.hover-text-black

.hover-text-body

.hover-text-muted

.hover-text-reset

Source: _docs/bootstrap.css, line 7571

1.2.2 Fonts

Text Colors variation documentation can be found Here

.ff-title : Barlow Condensed

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

.ff-text : Poppins

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

.ff-primary : Barlow Condensed

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

.ff-secondary : Poppins

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

.ff-tertiary : Poppins

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

.ff-quarternary : Teko

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard text.

Source: _docs/bootstrap.css, line 7537

1.2.3 Size

Text Colors variation documentation can be found Here

.fs-h1 : 2.5rem

.fs-h2 : 2rem

.fs-h3 : 1.75rem

.fs-h4 : 1.5rem

.fs-h5 : 1.25rem

.fs-h6 : 1rem

.fs-p : 1rem

.fs-xsmall : 12px

.fs-small : 1rem

.fs-medium : 20px

.fs-large : 24px

.fs-xlarge : 30px

.fs-xxlarge : 36px

.fs-40 : 40px

.fs-45 : 45px

.fs-50 : 50px

.fs-60 : 60px

.fs-70 : 70px

.fs-80 : 80px

Source: _docs/bootstrap.css, line 104

1.2.4 Line height

Text Colors variation documentation can be found Here

.lh-h1 : 2.5rem

.lh-h2 : 2rem

.lh-h3 : 1.75rem

.lh-h4 : 1.5rem

.lh-h5 : 1.25rem

.lh-h6 : 1rem

.lh-p : 1rem

.lh-xsmall : 12px

.lh-small : 1rem

.lh-medium : 20px

.lh-large : 24px

.lh-xlarge : 30px

.lh-xxlarge : 36px

.lh-40 : 40px

.lh-45 : 45px

.lh-50 : 50px

.lh-60 : 60px

.lh-70 : 70px

.lh-80 : 80px

Source: _docs/bootstrap.css, line 113

1.2.5 Font Weight

Colors variation documentation.

.fw-300 : 300

.fw-400 : 400

.fw-500 : 500

.fw-600 : 600

.fw-700 : 700

.fw-800 : 800

.fw-light : 300

.fw-lighter : lighter

.fw-normal : 400

.fw-bold : 700

.fw-bolder : bolder

Source: _docs/bootstrap.css, line 122

1.2.6 Alignment

Text Colors variation documentation.

.ta-start : left

.ta-end : right

.ta-center : center

Source: _docs/bootstrap.css, line 131

1.2.7 Decoration

Text Colors variation documentation.

.td-none

.td-underline

.td-line-through

Source: _docs/bootstrap.css, line 140

1.2.8 Transformation

Text Colors variation documentation.

.tt-lowercase

.tt-uppercase

.tt-capitalize

Source: _docs/bootstrap.css, line 149

1.2.9 White space

Text Colors variation documentation.

.white-space-wrap

Lorem Ipsum is simply dummy text of the printing and typesetting industry

.white-space-nowrap

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Source: _docs/bootstrap.css, line 158

1.2.10 Word wrap

Word wrap variation documentation.

.word-wrap-break

This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

none

This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Source: _docs/bootstrap.css, line 77

1.3 Background Colors

Background Colors variation documentation can be found Here

.bg-theme

.bg-gradient-theme

.bg-accent

.bg-gradient-accent

.bg-primary

.bg-gradient-primary

.bg-secondary

.bg-gradient-secondary

.bg-tertiary

.bg-gradient-tertiary

.bg-success

.bg-gradient-success

.bg-info

.bg-gradient-info

.bg-warning

.bg-gradient-warning

.bg-danger

.bg-gradient-danger

.bg-light

.bg-gradient-light

.bg-dark

.bg-gradient-dark

.bg-white

.bg-gradient-white

.bg-black

.bg-gradient-black

.bg-transparent

.bg-gradient-transparent

Source: _docs/bootstrap.css, line 7973

1.3.1 On hover

Background Colors on hover.
Hover your mouse in each block to see each variation.

.hover-bg-theme

.hover-bg-accent

.hover-bg-primary

.hover-bg-secondary

.hover-bg-tertiary

.hover-bg-success

.hover-bg-info

.hover-bg-warning

.hover-bg-danger

.hover-bg-light

.hover-bg-dark

.hover-bg-white

.hover-bg-black

.hover-bg-transparent