Styleguide

To get Source Code hover on any element.
Button will appear near element.
Click it and you will get modal with HTML code.


Website use Bootstrap 4
Website use Font Awesome 5 Pro Version

Sections(Offsets)

.section


.subsection-xs

margin-bottom: 5px

.subsection

margin-bottom: 30px

.subsection-lg

margin-bottom: 45px

.section

Buttons
Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Example body text

Paragraph.

Small Paragraph.

Large text.

X-Large text.

Lead text.

Lead Large text.

Display-1
Display-2
Display-3
Display-4
Backgrounds and colors

You can use div or span, or add class to any other element.

black
white
blue
pink
pink-darke
primary
primary-light
primary-darken
primary-dark
secondary
info
success
warning
danger
muted
gray


bg-black
bg-white
bg-blue
bg-pink
bg-pink-darken
bg-primary
bg-primary-light
bg-primary-darken
bg-primary-dark
bg-secondary
bg-info
bg-success
bg-warning
bg-danger
bg-muted
bg-gray
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Forms
Radio buttons
Checkboxes

Sizing
States
Custom forms
Toggler
Toggle
With text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, saepe.
Inline
Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Breadcrumbs
Indicators
Alerts

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.

Ut in consectetur nisi, at euismod urna. Aliquam gravida sapien vel velit imperdiet auctor in in lorem.


Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark


Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Progress
Basic
25%
25%
25%
50%
75%
100%

Multiple bars
15%
30%
20%

Striped
10%
25%
50%
75%
100%

Animated
80%
Table
Type Column heading Column heading Column heading
Default Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Jumbotron
Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
List groups
Cards
Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

No header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Modal
Show modal
Collapse

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Show child attributes
data.object string warning

Lorem ipsum dolor sit amet, consectetur invoice.created elit. Fusce efficitur nisl erat , quis pellentesque neque.

data.previous_attributes hash

Lorem ipsum dolor sit amet, consectetur elit. Fusce efficitur nisl erat , quis pellentesque neque.

Accordion
1
Meeting Opening
10:30am

The president announces the official start of the meeting and makes welcoming announcements.

2
Meeting Opening
10:30am

The president announces the official start of the meeting and makes welcoming announcements.

3
Meeting Opening
10:30am

The president announces the official start of the meeting and makes welcoming announcements.