Style Guide

Bootstrap Colors

Primary

classes "bg-primary text-white"

Secondary

classes "bg-secondary text-white"

Light

class "bg-light"

Gray

custom class "bg-grey"

Dark

classes "bg-dark text-white"

info

class "bg-info"

success

"bg-success"

warning

"bg-warning"

Danger

"bg-danger"

Typography: Titles

Heading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Bootstrap Display Heading classes:

Display 1

Display 2

Display 3

Display 4

Typography: Bootstrap text sizes
Lead paragraph

Add “lead” on ‘Text Editor’ widget in Advanced > CSS Classes field.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Regular paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Small paragraph

Add “small” on ‘Text Editor’ widget in Advanced > CSS Classes field
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Typography: Bootstrap text colors
Faded paragraph

Add “text-muted” on ‘Text Editor’ widget in Advanced > CSS Classes field. Can be combined with previous classes also.

Color text variations

Add the following classes on ‘Text Editor’ widget in Advanced > CSS Classes field:

“text-danger” for red text (error messages)

“text-warning” for orange text (attention messages)

“text-success” for green text (confirmation messages)

“text-info” for blue text (neutral messages)

“text-primary” to use brand primary color

“text-secondary” to use brand secondary color
Elementor Buttons