Get StartedDragonfly

Documentation

Tutorial to PHP, elements from all template, how to start

Changelog

Full upgrade list of the Dragonfly bootstrap theme

License & Credits

Read please the license and look at the credits

Elements

Complete official documentation for Bootstrap framework you can find here.

Grid Layout

Headings

h1 - Heading 1

h2 - Heading 2

h3 - heading 3

h4 - heading 4

h5 - heading 5

h6 - heading 6

            h1 headlines
            h2 headlines
            h3 headlines
            h4 headlines
            h5 headlines
            h6 headlines

Headings with secondary text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

            h1 headlines Secondary text
            h2 headlines Secondary text
            h3 headlines Secondary text
            h4 headlines Secondary text
            h5 headlines Secondary text
            h6 headlines Secondary text

Paragraphs text

Curabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce nibh. Integer lacinia. Donec quis nibh at felis congue commodo. In dapibus augue non sapien. Donec vitae arcu. Vivamus porttitor turpis ac leo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nam quis nulla. Nullam faucibus mi quis velit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aliquam erat volutpat.

...

Lead

Urabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce nibh. Integer lacinia. Donec quis nibh at felis congue commodo. In dapibus augue non sapien. Donec vitae arcu. Vivamus porttitor turpis ac leo.

...

Inline text elements

Bold

Urabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce nibh.

...

Italic

Urabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce nibh.

...

Small

Urabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce nibh.

...

Underline

Urabitur bibendum justo non orci.

...

Inserted text

Urabitur bibendum justo non orci.

...

Deleted text

~~Urabitur bibendum justo non orci.~~

...

Strikethrough text

~~Urabitur bibendum justo non orci.~~

...

Marked text

Urabitur bibendum justo highlightnon orci.

            highlight

Alignment classes

Left aligned text.

Center aligned text.

Right aligned text .

Justified text.

No wrap text.

Left aligned text.

Center aligned text.

Right aligned text .

Justified text.

No wrap text.

Transformation classes

Lowercased text.

Uppercased text.

Capitalized text.

Lowercased text.

Uppercased text.

Capitalized text.

Abbreviations

rabitur bibendum justo non orci attr

            attr

Addresses

Company. San Francisco, CA 29019
P: (313) 312-4345

Full Name
[email protected]

            
              Company.
              San Francisco, CA 29019

              P: (313) 312-4345
            

            
                Full Name

                [email protected]

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote options

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title

            
                Lorem ipsum dolor sit amet adipiscing elit ante.
                Someone famous in Source Title

Blockquote reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title

...

Lists

Unordered

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Ordered

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

...

Unstyled

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

...

Inline

Lorem
amet
dolor

...

Description

Lorem: Lorem ipsum dolor

Lorem: Lorem ipsum dolor

        
            ...
            ...

Horizontal description

Lorem: Lorem ipsum dolor
Lorem: Lorem ipsum dolor
Lorem: Lorem ipsum dolor

        
            ...
            ...

Big form with icon

Big form without icon

Small form without icon

Default Buttons

Transparent Buttons

Button Sizes

Full width buttons

Spaces

.space-sm .space-md .space .space-lg

        .space-sm {
            padding-top: 15px;
        }
        .space-md {
            padding-top: 20px;
        }
        .space {
            padding-top: 30px;
        }
        .space-lg {
            padding-top: 50px;
        }

Special line

Add to hr tag class .hr

        /* CSS file */
           
            .hr {
               margin-top: 40px;
               margin-bottom: 40px;
            }

Sections

Make you page clear and comfortable to read with .section

            @media (min-width: 768px) {
                .section-sm {
                    padding: 20px 0;
                }
                .section-md {
                    padding: 30px 0;
                }
                .section {
                    padding: 50px 0;
                }
                .section-lg {
                    padding: 80px 0;
                }
            }
            @media (max-width: 768px) {
                .section-sm {
                    padding: 15px 0;
                }
                .section-md {
                    padding: 20px 0;
                }
                .section {
                    padding: 30px 0;
                }
                .section-lg {
                    padding: 50px 0;
                }
            }

Filling Section

Minimal height of this section is 350px - section only for background image.

         .filling-section {
            min-height: 350px;
            position: relative;
        }

Small Container

Smaller container with width maximally 800px - .container-sm

            .container-sm {
                max-width: 800px;
                margin: 0 auto;
                padding-left: 15px;
                padding-right: 15px;
            }

Center block

Center every element with .v-center class for vertical center and .h-center class for horizontal center. You need to set position: relative; to parent element.

        .h-center,
        .v-center {
            position: absolute;
            top: 50%;
        }
        .v-center {
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }
        .h-center {
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

Margins

You can use .m-no-all for no margin.

Or no bottom margin .m-no-bottom.

Or no top margin .m-no-top.

            .m-no-all {
                margin: 0;
            }
            .m-no-bottom {
                margin-bottom: 0;
            }
            .m-no-top {
                margin-top: 0;
            }
            .m-no-left {
                margin-left: 0;
            }
            .m-no-right {
                margin-right: 0;
            }
            .m-10-top {
                margin-top: 10px;
            }

Paddings

You can use .p-no-left for no left padding, as you see below.

            .p-no-all {
                padding: 0;
            }
            .p-no-bottom {
                padding-bottom: 0;
            }
            .p-no-top {
                padding-top: 0;
            }
            .p-no-left {
                padding-left: 0;
            }
            .p-no-right {
                padding-right: 0;
            }

Colors

Colors for text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

...

Colors Background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Colors of Social Networks

Facebook - #3b5998

Google+ - #dd4b39

Twitter - #00aced

YouTube - #bb0000

Linkedin - #007bb6

Instagram - #517fa4

Pinterest - #cb2027

Vine - #00bf8f

Snapchat - #fffc00

Flickr - #ff0084

Tumblr - #32506d

Vimeo - #aad450

Foursquare - #0072b1

...

Filter of Background

.bg-filter-v2

.bg-filter

.bg-filter-v1

...

		/* CSS File */
			.bg-filter-v2 {
				background: rgba(0, 0, 0, 0.75);
				color: #fff;
			}
			.bg-filter {
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
			}
			.bg-filter-v1 {
				background: rgba(0, 0, 0, 0.45);
				color: #fff;
			}

Dragonfly includes the Font Awesome, that means you have access to 439 vector icons in one Font. Visit official websites.

General Icons

You need add to the ul tag class .circle-icons.

Also you can use the class .icons-list. It's perfect for list of icons.

You need add to the ul tag class .square-icons.

Also you can use the class .icons-list. It's perfect for list of icons.

Icons Effects

Choose some icon from Font Awesome. Then add .hovicon class, after that choose effect, e.g. effect-3 class and last you add .sub-b.

You can look at the effects other classes in the dragonfly.css, in the Icons Effects section.

Fusce aliquam vestibulum ipsum

Float Box

Just add the class .float-box as you see below.

Connect

It aut reiciendis voluptatibus maiores alias cons.

Apple

It aut reiciendis voluptatibus maiores alias cons.

Center Float Box

Add the classes .float-box and .center as you see below.

Connect

It aut reiciendis voluptatibus maiores alias cons.

Apple

It aut reiciendis voluptatibus maiores alias cons.

Square Box

Add the class .square as you see below.

Documentation

Tutorial to PHP, elements from all template, how to start

Documentation

Tutorial to PHP, elements from all template, how to start

Rotate Hover Effect

First you need create tag with class .hover-content, then inside create tag with class .visible-part and .hidden-part. See it below.

Basic

$5

per month

View Details

Details

5Gb Storage
1 Email account
2 Hosted domains
24/7 Email support

Start Trial

Basic

$10

per month

View Details

Details

5Gb Storage
1 Email account
2 Hosted domains
24/7 Email support

Start Trial

Slide to middle

First you need create tag with class .hover-content, then inside create tag with class .top-part and .bottom-part. See it below.
Notice that .top-part and .bottom-part have class .hidden-xs, that means this effect will not to display on screen less than 768px - mobile devices.

Title

...

Profile Effects

First you need create tag with class .profile, then inside .hover-content, inside add image, then create tag with two classes .content-open and .content-center. See it below.

First you need create tag with class .profile-circle, then inside .hover-content, inside add image, then create tag with two classes .content-open and .content-center. See it below.

Stephanie Morrison Designer

Cras vel urna iaculis orci pulvinar convallis ut eget nunc. Integer a mi ante. Sed ac urna commodo, volutpat justo a, mollis mi.

Stephanie Morrison Designer

Cras vel urna iaculis orci pulvinar convallis ut eget nunc. Integer a mi ante. Sed ac urna commodo, volutpat justo a, mollis mi.

...

Slide from Corners

First you need create tag with class .hover-content, then inside create three tag with class .part-a - datum of publishing, .part-b - basic info about a post and .part-c - for author of a post (small photo). See it below.

18 April

18 April

                
                    
                    
                        18
                        April
                    
                    
                    
                        
                    
                    
                    
                        
                            
                                
                                author
                            
                            
                                datum
                            
                            
                                
                                27 Comments
                            
                            
                                
                                Nature,
                                Photo,
                                Sea

Large tabs

Just add to list the class .lg-tabs.

Responsive
Ready for use
Shortcodes
Font Awesome

Inline tabs

Just add to list the class .inline-tabs.

Fully responsive
Ready for use
Shortcodes

Full Width tabs

Just add to list the class .fw-tabs.

Choose us
Our Growth
Our Goals

Filter Tabs

Just add to list the class .filter-tabs.

All
Application
Devices
Webdesign

           
                All
                Application
                Devices
                Webdesign

Filter Menu

Just add to list the class .filter-menu.

            
                All
                Application
                Devices
                Webdesign

Accordions

Launching

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt.

Deskop Apliaction

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt.

Storages

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt.

Protection

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt.

Get StartedDragonfly

Documentation

Changelog

License & Credits

Elements

Get Started

PHP Tutorial

Elements

Typography

Grid Layout

Headings

h1 - Heading 1

h2 - Heading 2

h3 - heading 3

h4 - heading 4

h5 - heading 5

h6 - heading 6

h1 headlines

h2 headlines

h3 headlines

h4 headlines

h5 headlines

h6 headlines

Headings with secondary text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

h1 headlines Secondary text

h2 headlines Secondary text

h3 headlines Secondary text

h4 headlines Secondary text

h5 headlines Secondary text

h6 headlines Secondary text

Paragraphs text

Lead

Inline text elements

Bold

Italic

Small

Underline

Inserted text

Deleted text

Strikethrough text

Marked text

Alignment classes

Transformation classes

Abbreviations

Addresses

Blockquotes

Blockquote options

Blockquote reverse

Lists

Unordered

Ordered

Unstyled

Inline

Description

Horizontal description

Forms

Big form with icon

Big form without icon

Small form without icon

Buttons

Default Buttons

Transparent Buttons

Button Sizes

Full width buttons

Helper Classes

Spaces

Special line

Sections

Filling Section

Small Container

Center block

Margins

Paddings

Colors