Style guide for template

Style guide for template

Source: _docs/bootstrap.css, line 38

4 Components

Various button styles. Documentation can be found Here

Source: _docs/bootstrap.css, line 7654

4.2 Background Overlay

Various button styles and colors. (description, just as before)

Pixel Perfect Design

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

Pixel Perfect Design

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

Pixel Perfect Design

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

Source: _docs/bootstrap.css, line 7756

4.2.1 Height

Various button styles and colors. (description, just as before)

Examples

Default styling

.h-p50

theme

.h-p75

theme

<div class="py-80 px-20 shadow">
    <div class="bg-overlay [modifier]"></div>
    <div class="rounded shadow bg-white h-100"></div>
</div>

Source: _docs/bootstrap.css, line 7774

4.2.2 Position

Various button styles and colors. (description, just as before)

Examples

Default styling

.overlay-middle.top-p50

theme

.top-p10

theme

.top-p20

theme

.top-p25

theme

.top-p30

theme

.top-p40

theme

.top-p50

theme

.top-p60

theme

.top-p70

theme

.top-p75

theme

.top-p80

theme

.top-p90

theme

<div class="py-80 px-20 shadow overflow-hidden position-relative">
    <div class="bg-overlay h-p50 [modifier]"></div>
    <div class="rounded shadow bg-white h-100"></div>
</div>

Source: _docs/bootstrap.css, line 7802

4.2.3 Color

Various button styles and colors. (description, just as before)

Examples

Default styling

.bg-theme

theme

<div class="py-80 px-20 shadow">
    <div class="bg-overlay [modifier]"></div>
    <div class="rounded shadow bg-white h-100"></div>
</div>

Source: _docs/bootstrap.css, line 3272

4.4 Buttons

Various button styles and colors. (description, just as before)

Link Element
(use the `btn` class)
<button class="btn shadow">Button Element</button> <a class="btn shadow">Link Element</a>

Source: _docs/bootstrap.css, line 4032

4.4.1 Colors

Various button styles and colors.
Class Modifier : {modifier}

Example

(use the `{modifier}` class) Your icon
(use the `{modifier}` class)
<a class="btn {modifier_class}">Your icon</a>

Source: _docs/bootstrap.css, line 5020

4.4.2 Social buttons

Buttons with social media colors.

Example

<a class="btn { social-btn-facebook }"><i class='fab fa-facebook-f'></i></a>
<a class="btn { social-btn-outline-facebook }"><i class='fab fa-facebook-f'></i></a>

Source: _docs/bootstrap.css, line 5093

4.4.3 Size

Various button sizes.

 <a href="" class="btn btn-c-theme {size-class}">
    Link button
 </a>
 <button class="btn btn-c-theme {size-class}">Button </button>

Source: _docs/bootstrap.css, line 5108

4.4.4 Shape

Various button Shape.

<a href="" class="btn btn-c-theme [modifier]">Link button</a>
<button class="btn btn-c-theme [modifier]">Button</button>
<a href="" class="btn btn-c-theme [modifier]"><i class='fa fa-arrow-right'></i></a>
<button class="btn btn-c-theme [modifier]"><i class='fa fa-arrow-right'></i></button>
<a href="" class="btn btn-c-theme [modifier]"><i class='fa fa-arrow-right'></i> button</a>
<button class="btn btn-c-theme [modifier]"><i class='fa fa-arrow-right'></i> button</button>

Source: _docs/bootstrap.css, line 5169

4.4.5 Reveal

Various button styles and colors. (description, just as before)

Examples

Default styling

Hover me!

.btn-reveal

Element (that looks like a button)

Hover me! 
<button class="btn btn-c-theme btn-s-lg [modifier]">
    <span class="reveal-text">Hover me!</span>
    <i class="fab fa-facebook-f"></i>
</button>
 <a href="" class="btn btn-c-theme btn-s-lg [modifier]">
    <span class="reveal-text">Hover me!</span>
    <i class="fab fa-facebook-f"></i>
 </a>

Source: _docs/bootstrap.css, line 8416

4.6 Shadow Layer

Various button styles and colors. (description, just as before)

Pixel Perfect Design

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

Pixel Perfect Design

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

Pixel Perfect Design

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

Source: _docs/bootstrap.css, line 8465

4.6.1 Color

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

Examples

Default styling

.shadow-layer-theme

#110305

.shadow-layer-accent

#991b1e

.shadow-layer-primary

#110305

.shadow-layer-secondary

#991b1e

.shadow-layer-tertiary

#FAFFFF

.shadow-layer-success

#20c997

.shadow-layer-info

#0d6efd

.shadow-layer-warning

#fd7e14

.shadow-layer-danger

#dc3545

.shadow-layer-light

#f8f9fa

.shadow-layer-dark

#212529

.shadow-layer-white

#fff

.shadow-layer-black

#000

.shadow-layer-gradient-theme

#110305

.shadow-layer-gradient-accent

#991b1e

.shadow-layer-gradient-primary

#110305

.shadow-layer-gradient-secondary

#991b1e

.shadow-layer-gradient-tertiary

#FAFFFF

.shadow-layer-gradient-success

#20c997

.shadow-layer-gradient-info

#0d6efd

.shadow-layer-gradient-warning

#fd7e14

.shadow-layer-gradient-danger

#dc3545

.shadow-layer-gradient-light

#f8f9fa

.shadow-layer-gradient-dark

#212529

.shadow-layer-gradient-white

#fff

.shadow-layer-gradient-black

#000

<div class="p-50 mw-400  position-relative">
    <div class='bg-overlay opacity-p50'></div>
    <div class="shadow text-center border-radius-4 shadow-layer [modifier]">
        <div class='bg-light  px-15 py-25 h-p100 w-p100'>
        </div>
    </div>
</div>