Documentation

logo

Elements

For Accordions, Tabs and Alerts to work correctly you need to include bootstrap.min.js

Accordions

<!-- Accordion Wrapper -->
<div class="panel-group" id="accordion">
                            
    <!-- Accordion panel 1 -->
    <div class="panel panel-default">
        <!-- Accordion Panel Heading -->
        <div class="panel-heading">
            <div class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    .... Accordion Heading 1 ....
                </a>
            </div>
        </div>
        <!-- Accordion Panel Body Text -->
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                .... accordion 1 info/data goes here ....
            </div>
        </div>
    </div>
    
    <!-- Accordion panel 1 -->
    <div class="panel panel-default">
        <!-- Accordion Panel Heading -->
        <div class="panel-heading">
            <div class="panel-title">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    .... Accordion Heading 2 ....
                </a>
            </div>
        </div>
        <!-- Accordion Panel Body Text -->
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                .... accordion 2 info/data goes here ....
            </div>
        </div>
    </div>
    
    <!-- Accordion panel 1 -->
    <div class="panel panel-default">
        <!-- Accordion Panel Heading -->
        <div class="panel-heading">
            <div class="panel-title">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    .... Accordion Heading 3 goes here ....
                </a>
            </div>
        </div>
        <!-- Accordion Panel Body Text -->
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                .... accordion 3 info/data goes here ....
            </div>
        </div>
    </div>
        
</div>

To change some CSS design aspects of Accordion look for Accordion Styles in main.style.css

Tabs

<!-- Tabs Navigation -->
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<!-- Tabs Content -->
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="tab1"> .... Tab 1 Content goes here .... </div>
    <div class="tab-pane" id="tab2"> .... Tab 2 content goes here .... </div>
    <div class="tab-pane" id="tab3"> .... Tab 3 Content goes here .... </div>
 </div>

To change some CSS design aspects of Tabs look for Tabs Styles in main.style.css

Alerts

Simple Alert


<!-- Simple Success Alert -->
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> Please read this important alert message.
</div>

Dismissible Alerts


<!-- Dismissible Success Alert -->
<div class="alert alert-success alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>Well done!</strong> Read this important alert message.
</div>

There are other alert types like alert-info, alert-warning, alert-danger etc.

Blockquotes

<!-- Blockquote style 1 -->
<blockquote class="quote-1">.... Blockquote goes here ....</blockquote>

<!-- Blockquote style 2 -->
<blockquote class="quote-2">.... Blockquote goes here ....</blockquote>

<!-- Blockquote style 3 -->
<blockquote class="quote-3">.... Blockquote goes here ....</blockquote>

<!-- Blockquote style 4 -->
<blockquote class="quote-4">.... Blockquote goes here ....</blockquote>

Carousels

For Carousels you need to include owl-carousel.css and owl.carousel.js

HTML Part

<!-- Carousel -->
>div id="testimonial">
     <div class="item"> ... Carousel slide 1/text goes here</div>
     <div class="item"> ... Carousel slide 2/text goes here</div>
     <div class="item"> ... Carousel slide 3/text goes here</div>
</div>

Script Part

// Carousel 
var owl = $("#testimonial");
owl.owlCarousel({
    singleItem:true,
    autoPlay: true,
    navigation: false,
    slideSpeed: 300,
    paginationSpeed: 300,
    rewindSpeed: 400
});

Counters

For Counters you need to include jquery.waypoints.min.js first and then jquery.counterup.min.js

HTML Part

<!-- On Scroll Animated Counter -->
<span class="timer">175498</h2>

Script Part

// on scroll animated timer/counter 
$('.timer').counterUp({
    delay: 20,
    time: 2000
});

Dividers

<!-- Divider style 1 -->
<div class="divider">><i class="fa fa-heart"></i></div>

<!-- Divider style 2 -->
<div class="divider divider-right"><i class="fa fa-heart"></i></div>

<!-- Divider style 3 -->
<div class="divider divider-center"><i class="fa fa-heart"></i></div>

<!-- Divider style 4 -->
<div class="divider divider-short divider-center"><i class="fa fa-heart"></i></div>

<!-- Divider style 5 -->
<div class="divider divider-short divider-right"><i class="fa fa-heart"></i></div>

<!-- Divider style 6 -->
<div class="divider divider-short"><i class="fa fa-heart"></i></div>

Instead of <i class="fa fa-heart"> you can use any other symbol/icon.

Simple Progress Bars

<!-- Progress Bars style 1 -->
<div class="progress-bar-base progress-bar-1">
    <div class="bar">
        <div class="hollow"></div>
        <div class="fill" style="width:80%">
            <span class="skill">HTML</span>
            <span class="percent">80%</span>
        </div>
    </div>
</div>

<!-- Progress Bars style 2 -->
<div class="progress-bar-base progress-bar-2">
    <div class="bar">
        <div class="hollow"></div>
        <div class="fill" style="width:80%">
            <span class="skill">HTML</span>
            <span class="percent">80%</span>
        </div>
    </div>
</div>

<!-- Progress Bars style 3 -->
<div class="progress-bar-base progress-bar-3">
    <div class="bar">
        <div class="hollow"></div>
        <div class="fill" style="width:80%">
            <span class="skill">HTML</span>
            <span class="percent">80%</span>
        </div>
    </div>
</div>

<!-- Progress Bars style 4 -->
<div class="progress-bar-base progress-bar-4">
    <div class="bar">
        <div class="hollow"></div>
        <div class="fill progress-bar-striped progress-bar-success" style="width:80%">
            <span class="skill">HTML</span>
            <span class="percent">80%</span>
        </div>
    </div>
</div>

<!-- Progress Bars style 4 with animation -->
<div class="progress-bar-base progress-bar-5">
    <div class="bar">
        <div class="hollow"></div>
        <div class="fill progress-bar-striped progress-bar-success animate-stripes" style="width:80%">
            <span class="skill">HTML</span>
            <span class="percent">80%</span>
        </div>
    </div>
</div>

Modal Popup & Image Gallery

For Modal Popup and Image Gallery you need to include magnific-popup.css and jquery.magnific-popup.min.js

1. Simple Lightbox with single image

<!-- Simple Lightbox with single image -->
<div class="multi-lightbox">
    <a title="first image" href="..path to image../placeholder1.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
    </a>
    <a title="second image" href="..path to image../placeholder4.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
    </a>
    <a title="third image" href="..path to image../placeholder6.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
    </a>
</div>

Script for Simple Lightbox with single image

// simple lightbox
$('.multi-lightbox').magnificPopup({
    delegate: 'a',
    type: 'image',
    mainClass: 'mfp-fade'
});

2. Lightbox Gallery

<!-- Simple Lightbox Gallery -->
<div class="lightbox-gallery">
    <a title="first image" href="..path to image../placeholder1.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
    </a>
    <a title="second image" href="..path to image../placeholder4.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
    </a>
    <a title="third image" href="..path to image../placeholder6.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
    </a>
</div>

Script for Simple Lightbox Gallery

// lightbox gallery			
$('.lightbox-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    mainClass: 'mfp-fade',
    gallery: { enabled:true }
});

3. Zoom Image Gallery

<!-- Zoom Image Gallery -->
<div class="zoom-gallery">
    <a title="first image" href="..path to image../placeholder1.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
    </a>
    <a title="second image" href="..path to image../placeholder4.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
    </a>
    <a title="third image" href="..path to image../placeholder6.jpg">
        <img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
    </a>
</div>

Script for Zoom Image Gallery

// zoom gallery
$('.zoom-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick: false,
    closeBtnInside: false,
    mainClass: 'mfp-with-zoom mfp-img-mobile',
    image: { verticalFit: true },
    gallery: { enabled: true },
    zoom: {
        enabled: true,
        duration: 300,
        opener: function(element) {
            return element.find('img');
        }
    }
});

4. Simple Modal Popup

<!-- Simple Modal Link -->
<a href="#simple-popup" class="simple-modal simple-popup-link">Open Popup</a>

<!-- Simple Modal Popup -->
<div id="simple-popup" class="just-center mfp-hide modal-block">
    .... text goes here ....
</div>

Script for Simple Modal Popup

// simple modal
$('.simple-popup-link').magnificPopup({
    type:'inline',
    mainClass: 'my-simple mfp-fade'
});

5. Zoom Modal Popup

<!-- Zoom Modal Link -->
<a href="#zoom-popup" class="zoom-popup-link simple-modal">Open Popup</a>

<!-- Zoom Modal Popup -->
<div id="zoom-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
    .... text goes here ....
</div>

Script for Zoom Modal Popup

// zoom modal			
$('.zoom-popup-link').magnificPopup({
    type:'inline',
    preloader: false,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in'
});
    
6. Slide Modal Popup

<!-- Slide Modal Link -->
<a href="#slide-popup" class="simple-modal slide-popup-link">Open Popup</a>

<!-- Slide Modal Popup -->
<div id="slide-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
    .... text goes here ....
</div>

Script for Slide Modal Popup

// slide modal
$('.slide-popup-link').magnificPopup({
    type:'inline',
    preloader: false,
    removalDelay: 300,
    mainClass: 'my-mfp-slide-bottom'
});    

7. Modal Popup with dismiss button

<!-- Modal with dismiss button link -->
<a href="#zoom-dismiss-popup" class="simple-modal dismiss-popup-link">Open Popup</a>

<!-- Modal with dismiss button -->
<div id="zoom-dismiss-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
    .... text goes here ....
    <a class="popup-modal-dismiss" href="#">Dismiss</a>
</div>

Script for Modal Popup with dismiss button

// poup with dismiss button
$('.dismiss-popup-link').magnificPopup({
    type:'inline',
    preloader: false,
    midClick: true,
    removalDelay: 300,
    modal: true,
    mainClass: 'my-mfp-zoom-in'
});

// prevent closing dismiss on overlay
$(document).on('click', '.popup-modal-dismiss', function (e) {
    e.preventDefault();
    $.magnificPopup.close();
});    

8. Video on popup

<!-- YouTube Video Popup -->
<a class="simple-modal popup-youtube"  href="http://www.youtube.com/watch?v=videoID">YouTube Video</a>

Script for video on popup

$('.popup-youtube').magnificPopup({
     disableOn: 700,
     type: 'iframe',
     mainClass: 'mfp-fade my-video',
     preloader: false    
});
    
Video Background

For Video Background you need to include jquery.vide.min.js

1. Simple Video Background

<!-- Simple Video Background -->
<div data-vide-bg="assets/video/winter">
    .... content goes here ....
</div>

Here you just need to provide a link to a video with initials only (without extension)

2. Video Background with Play/Pause on hover

<!-- Play-Pause Background Video ON mouse hover -->
<div class="mouse-hover" data-vide-bg="assets/video/winter">
    .... content goes here ....
</div>


// play-pause video on hover
$(document).ready(function() {
    'use strict';
    var video = $(".mouse-hover").data("vide").getVideoObject();
    video && video.pause();
    var figure = $(".mouse-hover").hover( hoverVideo, hideVideo );
    function hoverVideo(e) {  video.play(); }
    function hideVideo(e) { video.pause(); }				
});
    
3. Video Background with Play/Pause on hover

<!-- Play-Pause video background using button -->
<div class="play-pause" data-vide-bg="assets/video/winter">
    <button id="playbttn"><i class="ti-control-play"></i></button>
</div>


/* playbutton */
#playbttn {
    background:none;
    padding:0px
}		

#playbttn i {
    margin-left:0px;
    display:block;
    width:35px;
    height:35px;
    background:#FFFFFF;
    font-size:25px;
    text-align:center;
    padding-top:5px;
    color:#111111
}  

.change-icon:before {
    content:"\e6ae"
}  

// play-pause video on button click
$(document).ready(function() {
    var video = $(".play-pause").data("vide").getVideoObject();
    video && video.pause();
    var trackvid=0;
    $('#playbttn').on('click', function() {
        if(trackvid==0) {
            video.play();
            trackvid=1;
            $("#playbttn i").addClass("change-icon");
        }
        else {
            video.pause();
            trackvid=0;
            $("#playbttn i").removeClass("change-icon");
        }
    });				
});	

Paginations

<!-- Pagination style 1 -->
<nav role="navigation">
    <ul class="mod-pagination">
        <li class="button"><a class="disabled" href="#0">Prev</a></li>
        <li><a class="current" href="#0">1</a></li>
        <li><a href="#0">2</a></li>
        <li><a href="#0">3</a></li>
        <li><a href="#0">4</a></li>
        <li><span>...</span></li>
        <li><a href="#0">20</a></li>
        <li class="button"><a href="#0">Next</a></li>
    </ul>
</nav> 
                                
<!-- Pagination style 2 -->
<nav role="navigation">
    <ul class="mod-pagination no-space">
        <li class="button"><a href="#0">Prev</a></li>
        <li><a href="#0">1</a></li>
        <li><a href="#0">2</a></li>
        <li><a class="current" href="#0">3</a></li>
        <li><a href="#0">4</a></li>
        <li><span>...</span></li>
        <li><a href="#0">20</a></li>
        <li class="button"><a href="#0">Next</a></li>
    </ul>
</nav>
                                
<!-- Pagination style 3 -->
<nav role="navigation">
    <ul class="mod-pagination move-buttons custom-icons">
        <li class="button"><a class="disabled" href="#0">Prev</a></li>
        <li><a class="current" href="#0">1</a></li>
        <li><a href="#0">2</a></li>
        <li><a href="#0">3</a></li>
        <li><a href="#0">4</a></li>
        <li><span>...</span></li>
        <li><a href="#0">20</a></li>
        <li class="button"><a href="#0">Next</a></li>
    </ul>
</nav>
                                
<!-- Pagination style 4 -->
<nav role="navigation">
    <ul class="mod-pagination no-space move-buttons custom-icons">
        <li class="button"><a href="#0">Prev</a></li>
        <li><a href="#0">1</a></li>
        <li><a href="#0">2</a></li>
        <li><a class="current" href="#0">3</a></li>
        <li><a href="#0">4</a></li>
        <li><span>...</span></li>
        <li><a href="#0">20</a></li>
        <li class="button"><a href="#0">Next</a></li>
    </ul>
</nav>

Use of Parallax

For Parallax you need to include stellar.js

HTML Part

First of all, apply .bg-cover class to the <section>...</section> tag and then use data-stellar-background-ratio="0.5".

For Example,


<section class="bg-cover" data-stellar-background-ratio="0.5">
    .... content goes here ....
</section>

Then initialize stellar.js for non-touch devices as,

if(!Modernizr.touch){
    $(function(){
        $.stellar({
            horizontalScrolling: false,
            verticalOffset: 40
        });
    });
}

You may view this effect in home_parallax.html Form Elements

<!-- form input -->
<input type="text" placeholder="this is input field">

<!-- textarea input -->
<textarea placeholder="Your Message Goes Here"></textarea>

<!-- checkbox -->
<div class="checkbox">
    <input id="checkbox" type="checkbox" name="check" value="check1" checked>
    <label for="checkbox">Remember Me</label>
</div>

<!-- Radio button -->
<div class="radio">
    <input id="male" type="radio" name="gender" value="male">
    <label for="male">Male</label>
    <input id="female" type="radio" name="gender" value="female">
    <label for="female">Female</label>
</div>

For form validations we have used parsley.min.js. Use of buttons

<!-- Very Small Button -->
<a class="bttn bttn-very-small bttn-blue">Button</a>

<!-- small sized button -->
<a class="bttn bttn-small bttn-blue">Button</a>

<!-- medium sized button -->
<a class="bttn bttn-med bttn-blue">Button</a>

<!-- large sized button -->
<a class="bttn bttn-large bttn-blue">Button</a>

<!-- black button -->
<a class="bttn bttn-large bttn-black">Button</a>

<!-- green button -->
<a class="bttn bttn-large bttn-green">Button</a>

<!-- light button -->
<a class="bttn bttn-large bttn-light">Button</a>

<!-- light -alternate button -->
<a class="bttn bttn-large bttn-light-alt">Button</a>

<!-- shadow on button hover -->
<a class="bttn bttn-med bttn-blue bttn-hovr-shadow">Button</a>

<!-- dark shadow on button hover -->
<a class="bttn bttn-med bttn-blue bttn-hovr-shadow-dark">Button</a>

<!-- button shadow -->
<a class="bttn bttn-med bttn-blue bttn-shadow">Button</a>

<!-- disabled button -->
<a class="bttn bttn-med bttn-disable">Button</a>

<!-- button with radius 5px -->
<a class="bttn bttn-med bttn-blue bttn5">Button</a>

<!-- button with radius 75px -->
<a class="bttn bttn-med bttn-blue bttn75">Button</a>

<!-- button-scale on-click -->
<a class="bttn bttn-med bttn-blue bttn-scale">Button</a>

<!-- button with right side icon -->
<a class="bttn bttn-med bttn-blue">Button<i class="ti-alarm-clock right-icon"></i></a>

<!-- button with left side icon -->
<a class="bttn bttn-med bttn-blue"><i class="ti-alarm-clock left-icon"></i>Button</a>

For another variants, please refer main.style.css