Elements

Clean and simple code

Header

The Header includes the following.

Common Elements For Header

The header includes the top bar and main header. So below are the elements which are all common for both.

  • Toggle Search Icon - You can add this class class="toggle-search" here as shown in default form coding to get the search form on Toggle.
    • 							<form class="navbar-form" role="search">
							<div class="input-group toggle-search">
  • Simple Search Form - You can add this class class="toggle-search" in simple search form coding to get the search form on Toggle.
    • 							<div class="simple-search-form extra-menu-item">
							<form class="navbar-form toggle-search" role="search">
  • Cart - The Cart element you can show in top bar and main menu also. By default its shows on toggle. You can add this class class="hover-dropdown" to show on hover option.
    • 							<div id="extra-nav" class="extra-nav">
							<ul class="nav navbar-nav navbar-right hover-dropdown">
  • Header Language Flag - The Header Language you can add in top bar and main menu also. By default its shows on toggle. You can add this class class="hover-dropdown" to show on hover option.
    • 							<div class="navbar-collapse topnavbar-collapse collapse">
							<ul class="nav navbar-nav top-left hover-dropdown">

Top Bar

You can add elements that what are all needed for topbar are shown below.

  • Contact Details - You can show the Contact Details like Phone, Email in top bar.
  • Social Icons - You can show the Social icons like facebook, twitter, linkedin, pinterest, google plus, youtube, dribble.
  • Typography Light & Dark -
  • You can use this class="header-typo-light" for Light Typography in Top bar.
    • 							<header>
							<div id="header-top-bar" class="header-top-section header-typo-light">
  • You can add this class="header-typo-dark" for Dark color Typography in Top bar.
    • 							<header>
							<div id="header-top-bar" class="header-top-section header-typo-dark">
  • Top Menu - You can show the Menu in top bar also.

Main Header

You can add elements that what are all needed for topbar are shown below.

  • Header Toggle Contact Details - You can add Contact Details like Phone, Email, Search, Social Icons using toggle options.
  • Simple Search Box - You can show the default search box in header.
  • Megamenu - You can add this class class="dropdown mega-dropdown" to show the menu as Mega menu using Toggle and hover. By default its show on Toggle. You can add this class class="hover-dropdown" to show on hover.
    • 						<div id="nav-menu">
						<ul class="nav navbar-nav navbar-right hover-dropdown">
						<li class="dropdown mega-dropdown">
  • Mega Menu - Fullwidth - Remove this class class="container" which is highlighted to get the fullwidth Megamenu.
    • 						<li class="dropdown mega-dropdown">
						<a class="dropdown-toggle" href="#">
						<ul class="dropdown-menu mega-menu-wrapper container">
  • Mega Menu - Compact - You can add this class to get the mega menu to compact width(width may change based on Menu).
    • 						<div id="nav-menu">
						<ul class="nav navbar-nav navbar-right hover-dropdown">
						<li class="dropdown megamenu-compact dropdown-right mega-dropdown scroll">
  • Mega Menu - Image BG - You can add image bg for mega menu by using adding class.
    • 						<div id="nav-menu">
						<ul class="nav navbar-nav navbar-right hover-dropdown">
						<li class="dropdown megamenu-compact dropdown-right mega-dropdown scroll">
  • Sticky & Without Sticky - To get the sticky on normal header add this ID(id="sticker") and class(class="sticky-navigation") on navbar.
    • 						<div id="sticker" class="sticky-navigation header-main">
						<nav class="navbar navbar-default fixed">
  • Sticky After Section - You can enable sticky after slider or any section.
    • 						<div class="sticky-aft-section">
						<header class="header-dark header-transparent header-top-transparent header-sticky-light">
						<div id="header-top-bar" class="header-top-section header-typo-light navbar">
						<div id="sticker-aft" class="header-main sticky-navigation">
						....
						....
						</div>
  • Toggle Side Menu(Right Push) - You can add this Toggle Side Menu in Right side. In this you can show normal menu, dropdown menu, simple search box and social icons.
  • Dropdown - Default dropdown show on Toggle option.
  • Hover Dropdown - You can add this class class="hover-dropdown" for hover option to all kinds of elemets having dropdown options.
    • 							<div id="extra-nav" class="extra-nav">
								<ul class="nav navbar-nav navbar-right hover-dropdown">
  • Dark Dropdown - You can add this class class="header-dropdown-dark" for to show the Dark Dropdown menu.
    • 							<div id="nav-menu">
                            <ul class="nav navbar-nav navbar-right hover-dropdown">                                
                                <li class="dropdown mega-dropdown header-dropdown-dark">
  • Header - Dark, Light, Semi Transparent & Transparent. You can add this 4 types of color for header options.
  • Sticky Header - Dark & White. You can show the sticky as Dark color and white color.
  • Logo - Normal & Sticky. You can add logo for Normal menu and Sticky Menu separately. Also you can add Logo light for dark header background.
  • Height - Main Header & Sticky Header Height. You can adjust the height for Main header and Sticky Header in Data Attribute as below. data-height="100" is for Header height. data-sheight="60" is for Sticky Height.
    • 							<header data-height="100" data-sheight="60">
  • Header Without Border - You can add the header without outer border by adding this class class="header-no-border"
    • 						<header class="header-no-border">
  • One Page Menu - You can add the header without outer border by adding this class class="header-no-border"
    • 						<div id="nav-menu">
						<ul class="nav navbar-nav navbar-right hover-dropdown scroll">
						<li class="active">
						<a href="#section1">Section 1</a>	
						</li>

OWL CAROUSEL

You can add carousel slider from this elements.

Slider

Slider elements includes the following options.

  • Fullscreen(Height & Width adjust to screen) - This is the class class="full-screen" to fit the slider width & height to any screen.
    • 					<div class="page-wrapper">
					<section class="slider-section" data-background="images/owl-slider/owl-bg.png">
					<div class="owl-carousel full-screen">
  • Data Atrribute classes - You can add the following data attribute classes for various slider options.
    • data-animatein="zoomIn" data-animateout="slideOutDown" data-items="1" data-margin="" data-loop="true" data-merge="true" data-nav="true" data-dots="true"" data-stagepadding="" data-mobile="1" data-tablet="2" data-desktopsmall="2" data-desktop="1" data-autoplay="true" data-delay="3000" data-navigation="true" 
    <section class="slider-section" data-background="images/owl-slider/owl-bg.png">
					<div class="owl-carousel" data-animatein="zoomIn" data-animateout="slideOutDown" data-items="1" data-margin="" data-loop="true" data-merge="true" data-nav="true" data-dots="true"" data-stagepadding="" data-mobile="1" data-tablet="2" data-desktopsmall="2"  data-desktop="1" data-autoplay="true" data-delay="3000" data-navigation="true">
  • Typo-light & Dark-overlay - You can add this class class="item typo-light dark-overlay" for dark overlay slider.
    • <section class="slider-section" data-background="images/owl-slider/owl-bg.png">
					<div class="owl-carousel full-screen navigation-colored show-nav-hover nav-square dark-overlay" data-animatein="zoomIn" data-animateout="slideOutDown" data-items="1">
						<div class="item typo-light dark-overlay">

Owl Content

You can add the slider content with these two classes.

  • Vertical-middle - This is the class class="vertical-middle" to set the slider content at the middle.
  • Animation For Slider Content - You can add the following class class="animation" and data attribute classes data-animation="fadeInUp" data-animation-delay="800" for content animation.
    • <div class="item typo-light dark-overlay">
							<img src="images/owl-slider/1.jpg">
							<div class="container slider-content vertical-middle text-right">
								<h2 class="text-uppercase animated" data-animation="fadeInUp" data-animation-delay="400">Welcome to powerfull template</h2>

Navigation

You can add more number of styles for slider navigation are following.

  • Navigation Dark - You can add Dark style in slider navigation from this style.
  • Navigation Colored - You can add Colored style in slider navigation from this style.
  • Navigation Transparent - You can add Transparent style in slider navigation from this style.
  • Navigation Positions - You can place the navigation in various position like Top Left, Top Right, Bottom Left, Bottom Right.
  • Navigation Outer - You can add this style to show the Navigation from outer(Use it other than header slider like Team Slider, Client Slider etc.)
  • Navigation Shapes - You can add shapes styles like Square, Rounded, Circle.
  • Navigation Size - You can add Navigation size in Small and Middle Size.
  • Navigation Show on Hover - You can add this class class="show-nav-hover" to show the Navigation on Hover.

Pagination(Dots)

The following lists shows the pagination style.

  • Dots Square - You can add this Square style for pagination.
  • Dots Positions - You can place the Dots in various position like Top Left, Top Right, Bottom Left, Bottom Right.
  • Dots Right & Left Positions - You can use this class="dots-right" for right align vertical style and class="dots-right" left align vertical style.
    • <div class="page-wrapper">
						<section class="slider-section" data-background="images/owl-slider/owl-bg.png">
						<div class="owl-carousel dots-right dots-left">
  • Dots Outer - You can add this class class="dots-outer" to show the Dots from outer.
    • <div class="page-wrapper">
						<section class="slider-section" data-background="images/owl-slider/owl-bg.png">
						<div class="owl-carousel dots-outer">
  • Dots Dark - You can add this class class="dots-dots" to show the Dark Dots.
    • <div class="page-wrapper">
						<section class="slider-section" data-background="images/owl-slider/owl-bg.png">
						<div class="owl-carousel dark-dots">

Section Styles

The Section Style includes the following.

Section Titles

The Section titles which includes Title, Title Description, Description and Bottom Line. You can align it in Left, Right and Center. Also you can change these section title elements in hortizontal alignments.

					<div class="col-md-12">
					<div class="section-title-wrapper">					
					<h1 class="section-title bottom-line">Grey<span class="font-weight-light">Background</span></h1>
					<p class="title-description text-italic">Clean and simple code</p>
					<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					</div>

Background Styles

The Background Styles includes the following.

  • Grey Background - You can add the grey background style by using this class class="grey-bg" for Section BG.
    • 						<section class="grey-bg">
						<div class="container">
						<div class="row">
						<div class="col-md-12">
						<div class="section-title-wrapper">
						<p class="title-description text-italic">Clean and simple code</p>
						<h1 class="section-title bottom-line">
						Grey
						<span class="font-weight-light">Background</span>
						</h1>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
						</div>
						</div>
						</div>
						</div>
						</section>
  • Dark Background - You can add the grey background style by using this class class="dark-bg" and this class for light typography class="typo-light" for Dark Section BG.
    • 						<section class="dark-bg typo-light">
						<div class="container">
						<div class="row">
						...
  • Bg Image Fixed. - You can add bg fixed image style by using this class class="fixed-bg".
    • 						<section class="fixed-bg" data-background="images/bg/elements/1.jpg" >						
						<div class="container">
						<div class="row">
  • Bg Image Cover & Contain - You can add the Image cover and contain styles by this class class="bg-cover" and class="bg-contain".
    • 						<section class="fixed-bg bg-cover" data-background="images/bg/elements/1.jpg" >						
						<div class="container">
						<div class="row">
					 
    						<section class="fixed-bg bg-contain" data-background="images/bg/elements/1.jpg" >						
						<div class="container">
						<div class="row">
  • Bg Image Repeat & No Repeat - You can add the Image repeat option styles by this class class="bg-repeat" and for no repeat add this class class="bg-no-repeat".
    • 						<section class="fixed-bg bg-repeat" data-background="images/bg/elements/1.jpg" >						
						<div class="container">
						<div class="row">
					 
    						<section class="fixed-bg bg-no-repeat" data-background="images/bg/elements/1.jpg" >						
						<div class="container">
						<div class="row">
  • Bg Image Positions - You can add the bg image position styles by adding this class
    Top - class="background-position-top",
    Right - class="background-position-right",
    Bottom - class="background-position-bottom",
    Left - class="background-position-left". 
    • 						<section class="background-position-top" data-background="images/bg/elements/1.jpg" >
					 
    						<section class="background-position-right" data-background="images/bg/elements/1.jpg" >
					 
    						<section class="background-position-bottom" data-background="images/bg/elements/1.jpg" >
					 
    						<section class="background-position-left" data-background="images/bg/elements/1.jpg" >
  • Video BG - You can add video for bg section by use this class="dots-right".
    • 						<section class="pattern-overlay video-bg typo-light" data-background="images/bg/elements/1.jpg" >
  • Control(play button) On Center - You can show the controls over the video on center position.
  • Control On right - You can show the controls over the video on right position.
    • 						<section data-background="images/bg/elements/1.jpg" class="pattern-overlay video-bg typo-light">
						<div class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=ssfuvE-8dRk',containment:'.video-bg',startAt:0, mute:true, autoPlay:true, showControls:false}"></div>
						<div id ="video-controls" class="bottom-right">
							<a class="fa fa-pause icon-light icon-shape-circle icon-bordered-grey" href="#"></a>
							<a class="fa fa-volume-down icon-light icon-shape-circle icon-bordered-grey" href="#"></a>
						</div>
  • Theme Color BG - You can add this class="theme-bg" to get the theme color bg section.
    • 						<section class="theme-bg typo-light">
						<div class="container">
						<div class="row">
						...
  • BG with Left & Right Content Section - If you use Left content with right image or Right Content with left image use this class class="col-eq-height" to get the both columns equal in height.
    • <div class="container-fluid">
						<div class="row">
							<div class="col-md-6 col-eq-height padding-60">
  • Light & Dark Overlay For Bg Section - You can use this class="light-overlay" for bg light overlay and class="dark-overlay" for bg dark overlay.
    • <section class="fixed-bg" data-background="images/bg/elements/1.jpg">
					<div class="light-overlay"></div>					
					 
    <section class="fixed-bg" data-background="images/bg/elements/1.jpg">
					<div class="dark-overlay"></div>

Bottom Line

You can add this Bottom Line class for under title, above title etc by using this class class="bottom-line". You can use this class to show the bottom line wherever you can.

					<section class="grey-bg">
						<div class="container">
						<div class="row">
						<div class="col-md-12">
						<div class="section-title-wrapper">
						<p class="title-description text-italic">Clean and simple code</p>
						<h1 class="section-title bottom-line">Grey<span class="font-weight-light">Background</span>
						</h1>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
						</div>
						</div>
						</div>
						</div>
						</section>

Feature Box

The Feature Box includes the following.

Feature Box Icon

You can add more number of styles in Feature Box with Icon.

  • Feature Box Icon Styles - More number of styles in Feature Box with Icons are follows.
  • Default Icon Box - You can add Icon on top with left alignment, Center alignment and Right alignment.
    • <div class="row">
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-right hv-wrapper" data-animation="fadeInLeft">
									<div class="feature-inner-wrapper">
										<div class="icon-wrapper">
											<!-- ICON -->
											<i class="flaticon-heart64 fa-2x icon-shape-circle icon-light icon-theme-bg icon-hvdark-bg icon-hvtheme"></i>
										</div>	
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title bottom-line">Info Title</h4>
										</div>
									</div>	
									<!-- FEATURE DESCRIPTION -->
									<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-center hv-wrapper" data-animation="fadeInUp">
									..........
									..........
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-left hv-wrapper" data-animation="fadeInRight">
									..........
									..........
								</div><!-- /.FEATURE BOX -->
							</div>
						</div>
  • Icon and Title on Top - You can add Icon and Title on top with left alignment, Center alignment and Right alignment.
    • 						<div class="row">
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-right hv-wrapper style-2" data-animation="fadeInLeft">
									<div class="feature-inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<div class="icon-wrapper">
											<!-- ICON -->
											<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg icon-hvtheme icon-hvtransparent-bg icon-hvbordered-theme border b2 solid"></i>
										</div>	
									</div>	
									<!-- FEATURE DESCRIPTION -->
									<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-center hv-wrapper style-2" data-animation="fadeInUp">
									<div class="feature-inner-wrapper">
										<div class="icon-wrapper">
											<!-- ICON -->
											<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg icon-hvtheme icon-hvtransparent-bg icon-hvbordered-theme border b2 solid"></i>
										</div>	
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
									</div>	
									<!-- FEATURE DESCRIPTION -->
									<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box hv-wrapper style-2" data-animation="fadeInRight">
									<div class="feature-inner-wrapper">
										<div class="icon-wrapper">
											<!-- ICON -->
											<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg icon-hvtheme icon-hvtransparent-bg icon-hvbordered-theme border b2 solid"></i>
										</div>	
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
									</div>	
									<!-- FEATURE DESCRIPTION -->
									<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div><!-- /.FEATURE BOX -->
							</div>
						</div>
  • Icon Only Left, Title & Content on Top - You can add Icon only left and Title, Content on Top position with left alignment and Right alignment.
    • 					 <div class="row">
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-right style-3">
									<div class="inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<!-- FEATURE DESCRIPTION -->
										<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
									</div>	
									<div class="icon-wrapper">
										<!-- ICON -->
										<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg"></i>
									</div>	
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box text-center style-3">
									<div class="icon-wrapper">
										<!-- ICON -->
										<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg"></i>
									</div>	
									<div class="inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<!-- FEATURE DESCRIPTION -->
										<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
									</div>	
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-md-4 col-sm-6">
								<!-- FEATURE BOX -->
								<div class="feature-box style-3">
									<div class="icon-wrapper">
										<!-- ICON -->
										<i class="flaticon-heart64 fa-2x icon-shape-square icon-light icon-theme-bg"></i>
									</div>	
									<div class="inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<!-- FEATURE DESCRIPTION -->
										<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
									</div>	
								</div><!-- /.FEATURE BOX -->
							</div>
						</div>
  • Icon hover change while hover on box [hv-wrapper] - You can add Transparent style in slider navigation from this style.

Icons

You can add more number of styles for Icons.

  • Icon Shapes - You can add different shapes for feature-box with icon.
  • Square - You can add this class class="icon-shape-square" for Square Icon.
    • 						<i class="fa fa-home fa-2x icon-shape-square icon-light icon-dark-bg"></>
  • Rounded - You can add this class class="icon-shape-rounded" for Rounded Icon.
    • 						<i class="fa fa-home fa-2x icon-shape-rounded icon-light icon-dark-bg"></>
  • Circle - You can add this class class="icon-shape-circle" for Circle Icon.
    • 						<i class="fa fa-home fa-2x icon-shape-circle icon-light icon-dark-bg"></>
  • Icon Sizes - You can add different sizes [fa-2x upto fa-5x] for the icons using this class class="fa-2x".
    • 						<i class="fa fa-home fa-2x icon-shape-square icon-light icon-dark-bg"></>
  • Icon Color - You can use more number of color options for icons. The options are following. You can apply this color for all the shapes.
  • Light BG Icon - You can add this class class="icon-light-bg" to get the Light icon bg.
  • Grey BG Icon - You can add this class class="icon-grey-bg" to get the Grey icon bg.
  • Dark BG Icon - You can add this class class="icon-dark-bg" to get the Dark icon bg.
  • Theme BG Icon - You can add this class class="icon-theme-bg" to get the Theme icon bg.
  • Semi Light BG - You can add this class class="semi-light-bg" to get the semi light background icon.
    • 						<i class="fa fa-home fa-2x icon-shape-circle icon-light-bg"></i>
						<i class="fa fa-home fa-3x icon-shape-square icon-grey-bg"></i>
						<i class="fa fa-home fa-4x icon-shape-rounded icon-dark-bg"></i>
						<i class="fa fa-home fa-5x icon-shape-circle icon-theme-bg"></i>
						<i class="fa fa-home fa-5x icon-shape-rounded semi-light-bg"></i>
  • Icon With Border Color - You can use more number of color options for border icons. The options are following. You can apply this color for all the shapes.
  • Light Border Icon - You can add this class class="icon-bordered-light" to get the Light Border Icon.
  • Dark Border Icon - You can add this class class="icon-bordered-grey" to get the Grey Border Icon.
  • Theme Border Icon - You can add this class class="icon-bordered-dark" to get the Dark Border Icon bg.
    • 						<i class="fa fa-home fa-2x icon-shape-circle icon-bordered-light"></i>	
						<i class="fa fa-home fa-2x icon-shape-circle icon-bordered-grey"></i>
						<i class="fa fa-home fa-2x icon-shape-circle icon-bordered-dark"></i>
  • Social Icons - You can add all the social icons with different styles and add the respective color of each icons.
  • Social Icons with own color
  • Social Icons with dark color
  • Social Icons with own color bg
  • Social Icons with grey color bg
    • 						<i class="fa fa-google-plus fa-2x social-google-plus-color"></i>	
						<i class="fa fa-adn fa-2x social-adn-hvcolor"></i>	
						<i class="fa fa-adn fa-2x icon-light icon-shape-circle social-adn-bg"></i>	
						<i class="fa fa-weibo fa-2x icon-grey-bgicon-hvlight icon-shape-circle social-weibo-hvbg"></i>

Image Overlay

You can add more number of styles for Image Overlay Effects.

Image Overlay Effects

You can add more number of overlay effects.

  • Overlay Fade OUT & IN - You can add this class class="overlay-dark wrapper-fade-out" to get image overlay fade Out and this class class="overlay-dark wrapper-fade-in" to get image overlay fade In options.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER / OVERLAY FADE OUT -->
								<div class="image-wrapper typo-light">
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" alt="" />
									<!-- OVERLAY -->
									<div class="overlay-dark wrapper-fade-out">
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc wrapper-fade-out">
											<h4>Overlay Fade Out</h4>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.</p>
										</div>
										<!-- /.DESCRIPTION -->
									</div>	
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Image Scale IN & OUT - You can add this class class="wrapper-scale-in" to get image scale In and this class for class="wrapper-scale-Out" to get image scale Out.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER / IMAGE SCALE IN -->
								<div class="image-wrapper typo-light">
									<!-- PRETTY PHOTO LINK -->
									<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" class="wrapper-scale-in" alt="" />
									<!-- DESCRIPTION -->
									<div class="overlay-desc wrapper-fade-in">
										<h4>Image Scale In</h4>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.</p>
									</div>
									<!-- /.DESCRIPTION -->
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Overlay Light Image Scale In and Out - You can add this class class="wrapper-scale-in" to get light overlay image scale In and this class for class="wrapper-scale-Out" to get image scale Out.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER / IMAGE SCALE IN -->
								<div class="image-wrapper typo-light">
									<!-- PRETTY PHOTO LINK -->
									<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" class="wrapper-scale-in" alt="" />
									<!-- DESCRIPTION -->
									<div class="overlay-light wrapper-fade-in">
										<h4>Image Scale In</h4>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.</p>
									</div>
									<!-- /.DESCRIPTION -->
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Overlay slide - You can add more styles in Overlay slides are following.
  • Overlay slide In top - You can add this class class="wrapper-slidein-top" to get overlay slide from top.
  • Overlay slide In right - You can add this class class="wrapper-slidein-right" to get overlay slide from right.
  • Overlay slide In bottom - You can add this class class="wrapper-slidein-bottom" to get overlay slide from bottom.
  • Overlay slide In left - You can add this class class="wrapper-slidein-left" to get overlay slide from left.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER  / OVERLAY SLIDE IN TOP -->
								<div class="image-wrapper">
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" alt="" />
									<!-- OVERLAY -->
									<div class="overlay-light wrapper-slidein-top">
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc">
											<h4>Overlay SlideIn Top</h4>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit.</p>
										</div>
										<!-- /.DESCRIPTION -->
									</div>	
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Image slide - You can add more styles in Image slides are following.
  • Image Slide out Top - You can add this class class="wrapper-slideout-top" to get Image Slide from top.
  • Image Slide out right - You can add this class class="wrapper-slideout-right" to get Image Slide from top.
  • Image Slide out bottom - You can add this class class="wrapper-slideout-bottom" to get Image Slide from top.
  • Image Slide out left - You can add this class class="wrapper-slideout-left" to get Image Slide from top.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER / OVERLAY SLIDE OUT TOP  -->
								<div class="image-wrapper">
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" alt="" class="wrapper-slideout-top" />
									<div>
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc display-desc">
											<h4>Image SlideOut Top</h4>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit</p>
										</div>
									</div>	
									<!-- /.DESCRIPTION -->
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Overlay Scale IN & OUT - You can add this class class="wrapper-scale-in" to get overlay scale In and this class for class="wrapper-scale-Out" to get overlay scale Out.
    • 						<div class="row">
							<div class="col-sm-3">
								<!-- IMAGE WRAPPER / OVERLAY SCALE IN -->
								<div class="image-wrapper">
									<!-- IMAGE -->
									<img src="images/content/banner/1.jpg" alt="" />
									<!-- OVERLAY -->
									<div class="overlay-light wrapper-scale-in">
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/1.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc display-desc">
											<h4>Overlay Scale In</h4>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.</p>
										</div>
										<!-- /.DESCRIPTION -->
									</div>	
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>

Image Overlay Buttons

You can add more number of image overlay styles with buttons. Refer this link for Overlay buttons.

  • Overlay Buttons Fade Up - You can add this class class="overlay-buttons fade-up" to get image overlay buttons fade up
    • 						<div class="row">
							<div class="col-sm-3">
								 <!-- IMAGE WRAPPER / OVERLAY FADE IN -->
								<div class="image-wrapper typo-light">
									<!-- IMAGE -->
									<img src="images/content/banner/2.jpg" alt="" />
									<!-- OVERLAY -->
									<div class="overlay-dark wrapper-fade-in">
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/2.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc text-center wrapper-fade-in">
											<h4>Icon Fade Up</h4>
											<!-- OVERLAY BUTTON -->
											<ul class="overlay-buttons fade-up">
												<li>
													<!-- PRETTY PHOTO LINK -->
													<a href="images/content/banner/1.jpg" data-rel="prettyPhoto[portfolio]"><i class="fa fa-search icon-shape-circle icon-dark icon-light-bg"></i></a>
												</li>
												<li>
													<!-- SINGLE PAGE LINK -->
													<a href="#"><i class="fa fa-link icon-shape-circle icon-dark icon-light-bg"></i></a>
												</li>
											</ul>
										</div>
									</div>	
									<!-- /.DESCRIPTION -->
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Overlay Buttons Fade Right - You can add this class class="overlay-buttons fade-right" to get image overlay buttons fade right
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons fade-right">
  • Overlay Buttons Fade Down - You can add this class class="overlay-buttons fade-down" to get image overlay buttons fade down
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons fade-down">
  • Overlay Buttons Fade Left - You can add this class class="overlay-buttons fade-left" to get image overlay buttons fade-left
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons fade-left">
  • Overlay Buttons Fade Zoom In - You can add this class class="overlay-buttons text-center zoom-in" to get image overlay buttons zoom-in
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons text-center zoom-in">
  • Overlay Buttons Fade Rotate In - You can add this class class="overlay-buttons text-center rotate-in" to get image overlay buttons rotate-in
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons text-center rotate-in">
  • Overlay Buttons Fade Flip-x - You can add this class class="overlay-buttons flip-x" to get image overlay buttons Flip-x
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons text-center flip-x">
  • Overlay Buttons Fade Flip-y - You can add this class class="overlay-buttons flip-y" to get image overlay buttons Flip-y
    • 						<div class="col-sm-3">
						......
						......
						<ul class="overlay-buttons text-center flip-y">
  • Overlay Buttons Position - You can add these class to show the button in various positions.
  • Overlay Buttons Position Top - You can add this class class="position-top" to get image overlay buttons top position
    • 						<div class="row">
							<div class="col-sm-3">
								 <!-- IMAGE WRAPPER / OVERLAY FADE IN -->
								<div class="image-wrapper typo-light">
									<!-- IMAGE -->
									<img src="images/content/banner/2.jpg" alt="" />
									<!-- OVERLAY -->
									<div class="overlay-dark wrapper-fade-in">
										<!-- PRETTY PHOTO LINK -->
										<a href="images/content/banner/2.jpg" class="pretty-link " data-rel="prettyPhoto[portfolio]"></a>
										<!-- DESCRIPTION -->
										<div class="overlay-desc text-center position-top wrapper-fade-in">
											<h4>Position Top</h4>
											<!-- OVERLAY BUTTON -->
											<ul class="overlay-buttons">
												<li>
													<!-- PRETTY PHOTO LINK -->
													<a href="images/content/banner/1.jpg" data-rel="prettyPhoto[portfolio]"><i class="fa fa-search icon-shape-circle icon-dark icon-light-bg"></i></a>
												</li>
												<li>
													<!-- SINGLE PAGE LINK -->
													<a href="#"><i class="fa fa-link icon-shape-circle icon-dark icon-light-bg"></i></a>
												</li>
											</ul>
										</div>
									</div>	
									<!-- /.DESCRIPTION -->
								</div>
								<!-- /.IMAGE WRAPPER -->
							</div>
						</div>
  • Overlay Buttons Position Bottom - You can add this class class="position-bottom" to get image overlay buttons position bottom
  • Overlay Buttons Position Right - You can add this class class="position-right" to get image overlay buttons position right
  • Overlay Buttons Position Left - You can add this class class="position-left" to get image overlay buttons position left
  • Overlay Buttons Position Top Right - You can add this class class="position-right position-top" to get image overlay buttons position top right
  • Overlay Buttons Position Top Left - You can add this class class="position-left position-top" to get image overlay buttons position top left
  • Overlay Buttons Position Bottom Right - You can add this class class="position-right position-bottom" to get image overlay buttons position bottom right
  • Overlay Buttons Position Bottom Left - You can add this class class="position-left position-bottom" to get image overlay buttons position bottom left

Accordion

The following lists shows various styles for accordion. You can add this common classes like class="accordion-flat" to show the accordion without border. This class class="typo-light" is to show the typography light if the background color is dark and this class class="typo-dark" is to show the typography dark if the background color is light in all these accordion styles.

Default Accordion

You can add this default accordion styles.

							<div id="accordion-1" class="panel-group" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Plus

You can add this class class="accordion-plus" accordion plus styles.

							<div id="accordion-1" class="panel-group accordion-plus" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Arrow

Accordion Arrow - You can add this class class="accordion-arrow" default accordion styles.

							<div id="accordion-1" class="panel-group accordion-arrow" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Bordered

Accordion Bordered - You can add this class class="accordion-bordered" to show the accordion with border style.

							<div id="accordion-1" class="panel-group accordion-bordered" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Light

Accordion Light - You can add this class class="accordion-title-light" to show the title bg light color and this class class="accordion-content-light" to show the accordion content with light background color.

							<div id="accordion-1" class="panel-group accordion-title-light accordion-content-light" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Dark

Accordion Dark - You can add this class class="accordion-title-dark" to show the title bg light color and this class class="accordion-content-dark" to show the accordion content with light background color.

							<div id="accordion-1" class="panel-group accordion-title-dark accordion-content-dark" role="tablist">
							<div class="panel panel-default">
							<div id="headingOne-1" class="panel-heading" role="tab">
							....
							....
							</div>
							<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
							.....
							</div>
							</div>
							</div>

Accordion Transparent

Accordion Transparent - You can add this class class="accordion-title-transparent" to show the title bg light color and this class class="accordion-content-transparent" to show the accordion content with light background color.

						<div id="accordion-1" class="panel-group accordion-title-transparent accordion-content-transparent" role="tablist">
						<div class="panel panel-default">
						<div id="headingOne-1" class="panel-heading" role="tab">
						....
						....
						</div>
						<div id="collapseOne-1" class="panel-collapse collapse" aria-expanded="false" role="tabpanel" aria-labelledby="headingOne-1">
						.....
						</div>
						</div>
						</div>

Alert Box

The following lists shows various types for Alert boxes.

Default Alert Box(BG & Transparent)

You can use the alert box by adding the following code and also use alert box with background or transparent.

						<!-- ALERT SUCCESS WITH BG -->
						<div role="alert" class="alert alert-success alert-dismissible fade in">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
						<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
						</div>
					
						<!-- ALERT SUCCESS WITH TRANSPARENT -->
						<div role="alert" class="alert alert-success transparent-bg alert-dismissible fade in">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
						<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
						</div>

Alert Box With Border(BG & Transparent)

You can use the alert box by adding the following code and also use alert box with background or transparent.

						<!-- ALERT SUCCESS TOP BORDER WITH BG -->
						<div role="alert" class="alert style-2 alert-success alert-dismissible fade in">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
						<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
						</div>
					
						<!-- ALERT SUCCESS TOP BORDER WITH TRANSPARENT -->
						<div role="alert" class="alert style-2 alert-success transparent-bg alert-dismissible fade in">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
						<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
						</div>

Alert Box with Title and Content.(BG & Transparent)

You can use the alert box with title and content by adding the following code and also use alert box with background or transparent.

						<!-- ALERT SUCCESS TITLE & CONTENT WITH BG -->
						<div role="alert" class="alert alert-success alert-dismissible fade in">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<strong><span class="fa fa-check padding-right-10"></span>Success Message</strong>
							<hr class="style1">
							You successfully read this important alert message.
						</div>
					
						<!-- ALERT SUCCESS TITLE & CONTENT WITH TRANSPARENT -->
						<div role="alert" class="alert alert-success transparent-bg alert-dismissible fade in">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<strong><span class="fa fa-check padding-right-10"></span>Success Message</strong>
							<hr class="style1">
							You successfully read this important alert message.
						</div>

Animations

The following lists shows various styles for animations. Below showing the few animations, you can refer animate.css to add more number of animations.

  • Fade In
  • Fade In Up
  • Fade In Right
  • Fade In Down
  • Fade In Left
  • Fade In Up Big
  • Fade In Right Big
  • Fade In Down Big
  • Fade In Left Big
  • Bounce
  • Bounce In
  • Bounce In Up
  • Bounce In Down
  • Bounce In left
  • Rotate In
  • Rotate In Up Left
  • Rotate In Down Left
  • Rotate In Up Right
  • Rotate In Down Right
  • Pulse
  • shake
  • Tada
  • Swing
  • Wobble
  • Jello

Button Styles

The following lists shows various styles for buttons.

Bootstrap Buttons

You can add the following bootstrap button styles

  • Normal Button - You can use the following normal button styles.
  • Default Button - You can add this class class="btn btn-default" to show the default bootstrap button.
  • Primary Button - You can add this class class="btn btn-primary" to show the default bootstrap button.
  • Success Button - You can add this class class="btn btn-success" to show the default bootstrap button.
  • Info Button - You can add this class class="btn btn-info" to show the default bootstrap button.
  • Warning Button - You can add this class class="btn btn-warning" to show the default bootstrap button.
  • Danger Button - You can add this class class="btn btn-danger" to show the default bootstrap button.
    • 							<button class="btn btn-default" type="button">Default</button>
							<button class="btn btn-primary" type="button">Primary</button>
							<button class="btn btn-success" type="button">Success</button>
							<button class="btn btn-info" type="button">Info</button>
							<button class="btn btn-warning" type="button">Warning</button>
							<button class="btn btn-danger" type="button">Danger</button>
  • Dropdown Button - You can add this following class to show the dropdown bootstrap buttons.
    • 							<button class="btn btn-default dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">Action<span class="caret"></span>
							</button>
  • Dropdown Split Button - You can add this following class to show the dropdown bootstrap buttons with the split arrows.
    • 							<div class="btn-group">
							<button class="btn btn-default" type="button">Action</button>
							<button class="btn btn-default dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
							<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							</ul>
							</div>
  • Button Size - You can add this following class to show the bootstrap buttons in different sizes.
    • 							<button class="btn btn-default btn-lg" type="button">Default</button>
							<button class="btn btn-primary" type="button">Primary</button>
							<button class="btn btn-success btn-sm" type="button">Success</button>
							<button class="btn btn-info btn-xs" type="button">Info</button>
  • Button Block - You can add this following class to show the fullwidth bootstrap buttons.
    • 							<button class="btn btn-default btn-lg btn-block" type="button">Default</button>
							<button class="btn btn-primary btn-lg btn-block" type="button">Primary</button>

Theme Button

You can add the following theme button styles

  • Default Button - You can add this class class=" btn-theme btn-default" to show the default theme buttons styles.
  • Squared Button - You can add this class class=" btn-theme btn-square" to show the default theme buttons styles.
  • Rounded Button - You can add this class class=" btn-theme btn-round" to show the default theme buttons styles.
  • Fadeout Button - You can add this class class=" btn-theme btn-hv-fadeout" to show the default theme buttons styles.
  • Icon Left - You can add this class class="btn-theme btn-icon-left" to show the default theme buttons styles.
  • Icon Right - You can add this class class=" btn-theme btn-icon-right" to show the default theme buttons styles.
  • Icon Left Reveal - You can add this class class=" btn-theme btn-left-reveal" to show the default theme buttons styles.
  • Icon Right Reveal - You can add this class class=" btn-theme btn-right-reveal" to show the default theme buttons styles.
  • Fill Right - You can add this class class=" btn-theme btn-hvfill-right" to show the default theme buttons styles.
  • Fill Left - You can add this class class="btn-theme btn-hvfill-left" to show the default theme buttons styles.
  • Fill Top - You can add this class class="btn-theme btn-hvfill-top" to show the default theme buttons styles.
  • Fill Bottom - You can add this class class=" btn-theme btn-hvfill-bottom" to show the default theme buttons styles.
  • Border Right - You can add this class class=" btn-theme btn-hvborder-right" to show the default theme buttons styles.
  • Border Left - You can add this class class=" btn-theme btn-hvborder-left" to show the default theme buttons styles.
  • Border Center - You can add this class class=" btn-theme btn-hvborder-center" to show the default theme buttons styles.
  • 3d Button - You can add this class class="btn-3d" to show the default theme buttons styles.
    • 							<button class="btn btn-theme btn-hv-dark btn-default" type="button">Default Button</button>
							<button class="btn btn-theme btn-hv-dark btn-square btn-default" type="button">Squared Button</button>
							<button class="btn btn-theme btn-hv-dark btn-round btn-default" type="button">Rounded Button</button>
							<button class="btn btn-theme btn-hv-fadeout btn-default" type="button">Fade Out</button>
							<button class="btn btn-theme btn-hv-dark btn-icon-left btn-default" type="button">
							<i class="fa fa-shield"></i>
							Icon Left
							</button>
							<button class="btn btn-theme btn-hv-dark btn-icon-right btn-default" type="button">
							Icon Left
							<i class="fa fa-shield"></i>
							</button>
							<button class="btn btn-theme btn-hv-theme btn-left-reveal btn-default" type="button">
							<i class="fa fa-shield"></i>
							<span>Icon Left Reveal</span>
							</button>
							<button class="btn btn-theme btn-hv-theme btn-right-reveal btn-default" type="button">
							<span>Icon Right Reveal</span>
							<i class="fa fa-shield"></i>
							</button>
							<button class="btn btn-theme btn-hv-dark btn-hvfill-right btn-square btn-default" type="button">Fill right</button>
							<button class="btn btn-theme btn-hv-dark btn-hvfill-left btn-square btn-default" type="button">Fill Left</button>
							<button class="btn btn-theme btn-hv-dark btn-hvfill-top btn-square btn-default" type="button">Fill Top</button>
							<button class="btn btn-theme btn-hv-dark btn-hvfill-bottom btn-square btn-default" type="button">Fill bottom</button>
							<button class="btn btn-theme btn-hvborder-right btn-hv-dark btn-square btn-default" type="button">Border Right</button>
							<button class="btn btn-theme btn-hvborder-left btn-hv-dark btn-square btn-default" type="button">Border Left</button>
							<button class="btn btn-theme btn-hvborder-center btn-hv-dark btn-square btn-default" type="button">Border Center</button>
							<button class="btn btn-theme btn-hv-dark btn-3d btn-square btn-default" type="button">3d Button</button>

Theme Outline Button

You can add the following Theme outline button styles

  • Default Button - You can add this class class=" btn-theme btn-outline" to show the outline buttons styles.
    • 							<button class="btn btn-theme btn-outline" type="button">Default Button</button>

Dark Button

You can add the following dark button styles

  • Dark Button - You can add this class class=" btn-dark" to show the outline buttons styles.
    • 							<button class="btn btn btn-dark" type="button">Default Button</button>

Dark Outline Button

You can add the following dark outline button styles

  • Dark Outline Button - You can add this class class=" btn-outline" to show the outline buttons styles.
    • 							<button class="btn btn-outline" type="button">Default Button</button>

Light Button

You can add the following light button styles

  • Light Button - You can add this class class=" btn-light" to show the outline buttons styles.
    • 							<button class="btn btn-light" type="button">Default Button</button>

Light Outline Button

You can add the following light outline button styles

  • Light Button - You can add this class class=" btn-light btn-outline" to show the outline buttons styles.
    • 							<button class="btn btn-light btn-outline" type="button">Default Button</button>

Chart

The following lists shows various types for charts.

Line chart

You can use the line chart by adding the following code and also adjust the height and width of the chart.

						<div id="lineChart">
						<canvas id="lineChartmist" height="450" width="600"></canvas>
						</div>

Bar chart

You can use the bar chart by adding the following code and also adjust the height and width of the chart.

						<div id="barChart">
							<canvas id="barChartmist" height="450" width="600"></canvas>
						</div>

Radar chart

You can use the radar chart by adding the following code and also adjust the height and width of the chart.

						<div id="radarChart">
							<canvas id="radarChartmist" height="450" width="600"></canvas>
						</div>

Polar chart

You can use the polar chart by adding the following code and also adjust the height and width of the chart.

						<div id="polarAreaChart">
							<canvas id="polarAreaChartmist" height="450" width="600"></canvas>
						</div>

Pie chart

You can use the pie chart by adding the following code and also adjust the height and width of the chart.

						<div id="pieChart">
							<canvas id="pieChartmist" height="450" width="600"></canvas>
						</div>

Doughnut chart

You can use the doughnut chart by adding the following code and also adjust the height and width of the chart.

						<div id="doughnutChart">
							<canvas id="doughnutChartmist" height="450" width="600"></canvas>
						</div>

Client Grid

The following example shows the client grids. You can use from 2 column to 6 column client grids. Below shows the column client grids.

  • Client Grid 6 Column - You can add this class class="client-grid client-grid-6 to show the client in 6 column grids.
  • Client Grid 5 Column - You can add this class class="client-grid client-grid-5 to show the client in 5 column grids.
  • Client Grid 4 Column - You can add this class class="client-grid client-grid-4 to show the client in 4 column grids.
  • Client Grid 3 Column - You can add this class class="client-grid client-grid-3 to show the client in 3 column grids.
  • Client Grid 2 Column - You can add this class class="client-grid client-grid-2 to show the client in 2 column grids.
						<!-- GRID SECTION -->
						<section>
							<div class="container">
								<div class="row">
									<div class="col-md-12">
										<div class="section-title-wrapper clearfix">
											<h4 class="section-title bottom-line">Client Grid <span class="font-weight-light">6 Column</span></h4>
										</div>
										<ul class="client-grid client-grid-6 clearfix">
											<li><img src="images/content/client/1.png" class="img-responsive" width="200" height="150"></li>
											<li><img src="images/content/client/2.png" class="img-responsive" width="200" height="150"></li>
											<li><img src="images/content/client/3.png" class="img-responsive" width="200" height="150"></li>
											<li><img src="images/content/client/4.png" class="img-responsive" width="200" height="150"></li>
											<li><img src="images/content/client/5.png" class="img-responsive" width="200" height="150"></li>
											......
											......
										</ul>
									</div>
								</div>
							</div>
						</section>
						<!-- /.GRID SECTION -->

Counters

You can use the following class to show the counter in different styles. You can add a styles like default style, counter with top icon, counter with icon left align, counter with icon right align, etc.

Number Counter

You can show the default counter style with this following code.

						<div class="row">
							<div class="col-md-3 col-xs-6">
								<div class="text-center counter-wrapper hv-wrapper">
									<!-- COUNTER TITLE -->
									<h5 class="bottom-line text-grey">HOURS</h5>
									<!-- COUNTER NUMBER -->
									<h2 data-count="925" class="number-counter">925</h2>
								</div>
							</div>
							<div class="col-md-3 col-xs-6">
								<div class="text-center counter-wrapper hv-wrapper">
									<!-- COUNTER TITLE -->
									<h5 class="bottom-line text-grey">COFFEES</h5>
									<!-- COUNTER NUMBER -->
									<h2 data-count="3900" class="number-counter">3900</h2>
								</div>
							</div>
							....
							....
						</div>

Counter With Icon

You can show the counter style with icon styles.

						<div class="row">
							<div class="col-md-3 col-xs-6">
								<div class="text-center counter-wrapper hv-wrapper">
									<i class="fa fa-clock-o fa-3x icon-theme"></i>
									<!-- COUNTER NUMBER -->
									<h2 data-count="925" class="number-counter bottom-line">925</h2>
									<!-- COUNTER TITLE -->
									<h5 class="text-grey">HOURS</h5>
								</div>
							</div>
							<div class="col-md-3 col-xs-6">
								<div class="text-center counter-wrapper hv-wrapper">
									<i class="fa fa-coffee fa-3x icon-theme"></i>
									<!-- COUNTER NUMBER -->
									<h2 data-count="3900" class="number-counter bottom-line">3900</h2>
									<!-- COUNTER TITLE -->
									<h5 class="text-grey">COFFEES</h5>
								</div>
							</div>
							...
							...
						</div>

Counter With Transparent Icon

You can show the counter style with transparent icon styles.

						<div class="row">
							<div class="col-md-3 col-xs-6">
								<div class="feature-box style-3">
									<div class="icon-wrapper">
										<!-- ICON -->
										<i class="fa fa-clock-o fa-2x icon-shape-circle semi-dark-bg icon-light"></i>
									</div>	
									<div class="inner-wrapper text-center">
										<div class="title-wrapper">
											<!-- COUNTER TITLE -->
											<h5 class="bottom-line">HOURS</h5>
										</div>
										<!-- COUNTER NUMBER -->
										<h2 data-count="925" class="number-counter">925</h2>
									</div>	
								</div>
							</div>
							<div class="col-md-3 col-xs-6">
								<div class="feature-box style-3">
									<div class="icon-wrapper">
										<!-- ICON -->
										<i class="fa fa-coffee fa-2x icon-shape-circle semi-dark-bg icon-light"></i>
									</div>	
									<div class="inner-wrapper text-center">
										<div class="title-wrapper">
											<!-- COUNTER TITLE -->
											<h5 class="bottom-line">COFFEES</h5>
										</div>
										<!-- COUNTER NUMBER -->
										<h2 data-count="3900" class="number-counter">3900</h2>
									</div>	
								</div>
							</div>
							....
							....
						</div>

Separators

You can add the following style for separators.

Big Triangle Separators

You can show the Big Triangle Separators with this following code.

						<!-- BIG TRIANGLE SEPARATORS -->
						<section data-background="images/content/bg/elements/13.jpg" data-stellar-background-ratio="0.5" class="parallax-bg typo-light grey-bg seprator-section">
							<svg preserveAspectRatio="none" class="sep-btriangle" viewBox="0 0 4.66666 0.333331" fill="#f5f5f5" height="90" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<path d="M-0 0.333331l4.66666 0 0 -3.93701e-006 -2.33333 0 -2.33333 0 0 3.93701e-006zm0 -0.333331l4.66666 0 0 0.166661 -4.66666 0 0 -0.166661zm4.66666 0.332618l0 -0.165953 -4.66666 0 0 0.165953 1.16162 -0.0826181 1.17171 -0.0833228 1.17171 0.0833228 1.16162 0.0826181z">
							</svg>				
							<div class="pattern-overlay"></div>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title bottom-line">Big Triangle <span class="font-weight-light">Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>

Big Triangle Right Separators

You can show the Big Triangle Right Separators with this following code.

						<!-- BIG TRIANGLE RIGHT SEPARATORS -->
						<section class="grey-bg seprator-section">
							<svg class="sep-btriangle-right" xmlns="http://www.w3.org/2000/svg" fill="#1ABC9C" version="1.1" width="100%" height="90" viewBox="0 0 2000 90" preserveAspectRatio="none">
								<polygon xmlns="http://www.w3.org/2000/svg" points="535.084,64.886 0,0 0,90 2000,90 2000,0 "/>
							</svg>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title bottom-line">Big Triangle <span class="font-weight-light">Right Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>
						<!-- BIG TRIANGLE RIGHT SEPARATORS -->

Big Triangle Left Separators

You can show the Big Triangle Left Separators with this following code.

						<!-- BIG TRIANGLE LEFT SEPARATORS -->
						<section class="theme-bg typo-light seprator-section">
							<svg class="sep-btriangle-left" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#E67E22" width="100%" height="90" viewBox="0 0 2000 90" preserveAspectRatio="none">
								<polygon xmlns="http://www.w3.org/2000/svg" points="535.084,64.886 0,0 0,90 2000,90 2000,0 "/>
							</svg>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title grey-line bottom-line">Big Triangle <span class="font-weight-light">Left Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>
						<!-- /. BIG TRIANGLE LEFT SEPARATORS -->

Slant Right Separators

You can show the Slant Right Separators with this following code.

						<!-- SLANT RIGHT SEPARATORS -->
						<section class="theme-bg typo-light seprator-section" data-bgcolor="#E67E22">
							<svg preserveAspectRatio="none" viewBox="0 0 4 0.266661" height="90" width="100%" fill="#16B6EA" version="1.1" xmlns="http://www.w3.org/2000/svg" class="slant-right"><polygon points="4,0 4,0.266661 -0,0.266661 " class="fil0"/></svg>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title grey-line bottom-line">Slant Right <span class="font-weight-light"> Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>
						<!-- SLANT RIGHT SEPARATORS -->

Slant Left Separators

You can show the Slant Left Separators with this following code.

						<!-- SLANT LEFT SEPARATORS -->
						<section class="theme-bg typo-light seprator-section" data-bgcolor="#16B6EA">
							<svg preserveAspectRatio="none" viewBox="0 0 4 0.266661" height="90" width="100%" fill="#E74C3C" version="1.1" xmlns="http://www.w3.org/2000/svg" class="slant-left"><polygon points="4,0 4,0.266661 -0,0.266661 " class="fil0"/></svg>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title grey-line bottom-line">Slant Left <span class="font-weight-light"> Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>
						<!-- SLANT LEFT SEPARATORS -->

Curve Separators

You can show the Curve Separators with this following code.

						<!-- CURVE SEPARATORS -->
						<section class="theme-bg typo-light seprator-section" data-bgcolor="#16B6EA">
							<svg preserveAspectRatio="none" viewBox="0 0 4 0.266661" height="90" width="100%" fill="#E74C3C" version="1.1" xmlns="http://www.w3.org/2000/svg" class="slant-left"><polygon points="4,0 4,0.266661 -0,0.266661 " class="fil0"/></svg>
							<div class="container">
								<div class="row">
									<div class="col-md-12 full-screen">
										<!-- SECTION TITLE WRAPPER -->
										<div class="section-title-wrapper vertical-middle text-center">
											<!-- SECTION SUB TITLE -->
											<h3 class="section-title grey-line bottom-line">Slant Left <span class="font-weight-light"> Separators</span></h3>
											<!-- TITLE DESCRIPTION -->
											<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
										</div><!-- /. SECTION TITLE WRAPPER -->	
									</div>
								</div>
							</div>
						</section>
						<!-- CURVE SEPARATORS -->

Line Separators

You can show the Line Separators with this following code.

						<div class="row">
							<div class="col-md-6">
								<!-- PLAIN LINE -->
								<hr class="style1">
								<!-- DOUBLE LINE -->
								<hr class="style2">
								<!-- DASHED LINE -->
								<hr class="style3">
								<!-- DOTTED LINE -->
								<hr class="style4">
								<!-- STRONG DASHED LINE -->
								<hr class="style5">
								<!-- STRONG DOTTED LINE -->
								<hr class="style6">
								<hr class="style7">
								<hr class="style8">
								<hr class="style9">
							</div>
							<div class="col-md-6">
								<hr class="style10">
								<hr class="style11">
								<hr class="style12">
								<!-- SHADOW LINE -->
								<hr class="style13">
								<!-- THIN ENDS LINE -->
								<hr class="style14">
								<!-- HEART ICON DOUBLE LINE -->
								<hr class="style15">
								<!-- SISSIOR ICON DOUBLE LINE -->
								<hr class="style16">
								<hr class="style17">
								<!-- ROUNDED ENDS LINE -->
								<hr class="style18">
							</div>
						</div>

Form

You can add the various forms with different styles.

Contact Form

1.Default Contact Form

						<div class="col-sm-6">
						<div class="section-title-wrapper clearfix">
							<h4 class="section-title bottom-line">Contact<span class="font-weight-light"> Form</span></h4>
						</div>
						<p class="form-message" style="display: none;"></p>
						<div class="contact-form margin-bottom-30">
							<!-- Form Begins -->
							<form role="form" name="bootstrap-form" id="bootstrap-form" method="post" action="php/contact-form.php">
								<!-- Field 1 -->
								<div class="input-text form-group">
									<input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
								</div>
								<!-- Field 2 -->
								<div class="input-email form-group">
									<input type="email" name="contact_email" class="input-email form-control" placeholder="Email"/>
								</div>
								<!-- Field 3 -->
								<div class="input-email form-group">
									<input type="text" name="contact_phone" class="input-phone form-control" placeholder="Phone"/>
								</div>
								<!-- Field 4 -->
								<div class="textarea-message form-group">
									<textarea name="contact_message" class="textarea-message form-control" placeholder="Message" rows="4" ></textarea>
								</div>
								<!-- Button -->
								<button class="btn btn-theme btn-square btn-hv-dark btn-hv-dark btn-icon-right btn-default" type="submit">Send<i class="icon-paper-plane"></i></button>
							</form>
							<!-- Form Ends -->
						</div>
						</div>

2.Transparent Contact Form

You can add this class class="form-transparent" to show the contact form in transparent.

						<div class="col-sm-6">
							<div class="section-title-wrapper clearfix">
								<h4 class="section-title bottom-line">Contact<span class="font-weight-light"> Form</span></h4>
							</div>
							<p class="form-message" style="display: none;"></p>
							<div class="contact-form form-transparent form-flat margin-bottom-30">
								<!-- Form Begins -->
								<form role="form" name="bootstrap-form" id="bootstrap-form" method="post" action="php/contact-form.php">
									<!-- Field 1 -->
									<div class="input-text form-group">
										<input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
									</div>
									........
									........
								</form>
								<!-- Form Ends -->
							</div>
						</div>

3.Dark Contact Form

You can add this class class="form-dark" to show the contact form in transparent.

						<div class="col-sm-6">
								<div class="section-title-wrapper clearfix">
									<h4 class="section-title bottom-line">Contact<span class="font-weight-light"> Form</span></h4>
								</div>
								<p class="form-message" style="display: none;"></p>
								<div class="contact-form form-dark form-flat margin-bottom-30">
									<!-- Form Begins -->
									<form role="form" name="bootstrap-form" id="bootstrap-form" method="post" action="php/contact-form.php">
										<!-- Field 1 -->
										<div class="input-text form-group">
											<input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
										</div>
										...............
										..........
									</form>
									<!-- Form Ends -->
								</div>
						</div>

Career Form

You can add the career-form in three styles like default, transparent and dark. You can use the following class to get the form styles. This class class="form-box form-transparent is for transparent career form style. This class class="form-box form-dark form-flat is for dark career form style.

1. Default Career Form

						<!-- CAREER FORM -->
						<div class="career-form">
							<p class="form-message" style="display: none;"></p>
							<form role="form" class="form-box" name="careerform"  id="careerform"  method="post"  enctype='multipart/form-data'>
								<p id="form-message2" class="form-message2"></p>
								<!-- Field 1 -->
								<div class="input-text form-group">
									<input class="input-name form-control" type="text" id="career_name" name="career_name" placeholder="Name" />
								</div>
								<!-- Field 2 -->
								<div class="input-email form-group">
									<input type="email" id="femail" name="femail" class="form-input input-email form-control" placeholder='From E-Mail'/>
								</div>
								<div class="row" role="form">
									<!-- Field 3 -->
									<div class="col-md-6 form-group">
										<label class="sr-only">Age</label>
										<input type="text" name="career_age" class="form-control" placeholder="Age" />
									</div>
									<!-- Field 4 -->
									<div class="col-md-6 form-group">
										<label class="sr-only">City</label>
										<input type="text" name="career_city" class="form-control" placeholder="City" />
									</div>
								</div>
								<!-- Field 5 -->
								<div class="input-phone form-group">
									<label class="sr-only">Phone</label>
									<input class="input-phone form-control" type="text" id="career_phone" name="career_phone" placeholder="Phone" />
								</div>
								.....
								.....
								.....
								<!-- Field 10 -->
								<div class="input-file form-group">
									<input type="file" id="careerfile" name="careerfile" class="input-file" />
								</div>
								<div class="clearfix"></div>
								<!-- Button -->
								<button type="submit" class="btn btn-theme btn-square btn-hv-dark btn-hv-dark btn-icon-right btn-default" >Submit</button>
							</form>
						</div>

Subscribe Form

You can add the subscribe-form in three styles like default, transparent and dark. You can use the following class to get the form styles. This class class="form-transparent is for transparent career form style. This class class="form-dark form-flat is for dark career form style.

1. Default Subscribe Form

						<!-- SUBSCRIBE FORM -->
						<p class="form-message1" style="display: none;"></p>
						<div class="clearfix"></div>
						<form class="input-group" name="subscribe-form" method="post" action="php/subscription.php" id="subscribe-form">
							<div class="form-group has-feedback">
								<input class="form-control" type="email" placeholder="Subscribe" value="" name="subscribe_email">
							</div>
							<!-- BUTTON -->
							<span class="input-group-btn">
								<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-arrow-right"></span></button>
							</span>
						</form>

Map

You can add map with more styles and types which are shown below.

Default Map

						<div class="row">
							<div class="col-md-6">
								<h4 class="section-title bottom-line">Default <span class="font-weight-light">Map</span></h4>
								<div style="height: 376px;" class="map-canvas" data-zoom="12" data-lat="-35.2835" data-lng="149.128" data-title="Autin" data-type="roadmap" data-hue="" data-content="Company Name&lt;br&gt; Contact: +012 (345) 6789&lt;br&gt; info@youremail.com"></div>
							</div>
						</div>

Color Map

						<div class="row">
							<div class="col-md-6">
								<h4 class="section-title bottom-line">Color <span class="font-weight-light">Map</span></h4>
								<div style="height: 376px;" class="map-canvas" data-zoom="12" data-lat="-35.2835" data-lng="149.128" data-title="Autin" data-type="roadmap" data-hue="#00ff77" data-content="Company Name&lt;br&gt; Contact: +012 (345) 6789&lt;br&gt; info@youremail.com"></div>
							</div>
						</div>

Satellite Map

						<div class="row">
							<div class="col-md-6">
								<h4 class="section-title bottom-line">Satellite <span class="font-weight-light">Map</span></h4>
								<div style="height: 376px;" class="map-canvas" data-zoom="12" data-lat="-35.2835" data-lng="149.128" data-title="Autin" data-type="satellite" data-hue="" data-content="Company Name&lt;br&gt; Contact: +012 (345) 6789&lt;br&gt; info@youremail.com"></div>
							</div>
						</div>

Hybrid Map

						<div class="row">
							<div class="col-md-6">
								<h4 class="section-title bottom-line">Hybrid <span class="font-weight-light">Map</span></h4>
								<div style="height: 376px;" class="map-canvas" data-zoom="12" data-lat="-35.2835" data-lng="149.128" data-title="Autin" data-type="hybrid" data-hue="" data-content="Company Name&lt;br&gt; Contact: +012 (345) 6789&lt;br&gt; info@youremail.com"></div>
							</div>
						</div>

Terrain Map

						<div class="row">
							<div class="col-md-6">
								<h4 class="section-title bottom-line">Hybrid <span class="font-weight-light">Map</span></h4>
								<div style="height: 376px;" class="map-canvas" data-zoom="12" data-lat="-35.2835" data-lng="149.128" data-title="Autin" data-type="hybrid" data-hue="" data-content="Company Name&lt;br&gt; Contact: +012 (345) 6789&lt;br&gt; info@youremail.com"></div>
							</div>
						</div>

List & Panels

You can add list and type with following styles.

Default List Styles

List Style One(Arrow Lists)

						<div class="row text-medium">
							<div class="col-md-3 col-sm-6">
								<ul class="arrow-list list-hover">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ul>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ul>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ul>
							</div>
						</div>

List Style Two(Bullet Lists)

						<div class="row text-medium">
							<div class="col-md-3 col-sm-6">
								<ul class="bullet-list">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ul>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ul>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ul>
							</div>
						</div>

List Style Three(Dashed Lists)

						<div class="row text-medium">
							<div class="col-md-3 col-sm-6">
								<ul class="dashed-list">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ul>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ul>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ul>
							</div>
						</div>

List Style Four(Square Lists)

						<div class="row text-medium">
							<div class="col-md-3 col-sm-6">
								<ul class="square-list">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ul>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ul>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ul>
							</div>
						</div>

Creative List Styles

List Style One(Rounded Lists)

						<div class="row text-medium">
							<div class="col-sm-4">
								<ol class="rounded-list">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ol>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ol>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ol>
							</div>
						</div>

List Style One(Rectangle Lists)

						<div class="row text-medium">
							<div class="col-sm-4">
								<ol class="rectangle-list">
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
									<li>
										<a href="">List item</a>
										<ol>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
											<li><a href="">List sub item</a></li>
										</ol>
									</li>
									<li><a href="">List item</a></li>
									<li><a href="">List item</a></li>
								</ol>
							</div>
						</div>

List Style One(Circle Lists)

						<div class="row text-medium">
							<div class="col-sm-4">
								<ol class="circle-list">
									<li><a href=""><span>List item</span></a></li>
									<li><a href=""><span>List item</span></a></li>
									<li><a href=""><span>List item</span></a></li>
									<li><a href=""><span>List item</span></a></li>
									<li><a href=""><span>List item</span></a></li>
								</ol>
							</div>
						</div>

Panel List Styles

Panel List Style One

						<div class="col-md-3">
							<div id="MainMenu">
								<div class="list-group panel">
									<p href="#demo" class="list-group-item bg-color light">Menu List</p>
									<div class="collapse in" id="demo1">
										<a href="#SubMenu" class="list-group-item in collapsed" data-toggle="collapse" data-parent="#SubMenu">Standard Post <i class="fa fa-angle-down"></i></a>
										<div class="collapse list-group-submenu" id="SubMenu">
											<a href="#" class="list-group-item" data-parent="#SubMenu">Standard Layout 1</a>
											<a href="#" class="list-group-item" data-parent="#SubMenu">Standard Layout 2</a>
											<a href="#SubSubMenu" class="collapsed in list-group-item" data-toggle="collapse" data-parent="#SubSubMenu">Standard 3 <i class="fa fa-angle-down"></i></a>
											<div class="list-group-submenu" id="SubSubMenu">
												<a href="#" class="list-group-item" data-parent="#SubSubMenu">Standard</a>
												<a href="#" class="list-group-item" data-parent="#SubSubMenu">Standard</a>
											</div>
										</div>
										<a href="#" class="list-group-item">Gallery Post</a>
										<a href="#" class="list-group-item">Video Post</a>
										<a href="#" class="list-group-item">Image Post</a>
										<a href="#" class="list-group-item">Audio Post</a>
										<a href="#" class="list-group-item">Quote Post</a>
										<a href="#" class="list-group-item">Link Post</a>
									</div>
								</div>
							</div>
							<!-- category-list -->
						</div>

Panel List Style Two(Arrow List)

						<div class="col-md-3">
							<div id="MainMenu">
								<div class="list-group panel arrow-list border-none">
									<a href="#demo" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu2">Menu List</a>
									<div class="collapse in" id="demo1">
										<a href="#SubMenu2" class="list-group-item in collapsed" data-toggle="collapse" data-parent="#SubMenu2">Standard Post <i class="fa fa-angle-down"></i></a>
										<div class="collapse list-group-submenu" id="SubMenu2">
											<a href="#" class="list-group-item" data-parent="#SubMenu2">Standard Layout 1</a>
											<a href="#" class="list-group-item" data-parent="#SubMenu2">Standard Layout 2</a>
											<a href="#SubSubMenu2" class="collapsed in list-group-item" data-toggle="collapse" data-parent="#SubSubMenu">Standard 3 <i class="fa fa-angle-down"></i></a>
											<div class="list-group-submenu" id="SubSubMenu2">
												<a href="#" class="list-group-item" data-parent="#SubSubMenu2">Standard</a>
												<a href="#" class="list-group-item" data-parent="#SubSubMenu2">Standard</a>
											</div>
										</div>
										<a href="#" class="list-group-item">Gallery Post</a>
										<a href="#" class="list-group-item">Video Post</a>
										<a href="#" class="list-group-item">Image Post</a>
										<a href="#" class="list-group-item">Audio Post</a>
										<a href="#" class="list-group-item">Quote Post</a>
										<a href="#" class="list-group-item">Link Post</a>
									</div>
								</div>
							</div>
							<!-- category-list -->
						</div>

Panel List Style Two(Light Bg)

						<div class="col-md-3">
							<div id="MainMenu1">
								<div class="list-group panel ex-panel">
									<p href="#demo" class="list-group-item bg-color light">Menu List</p>
									<div class="collapse in" id="demo2">
										<a href="#SubMenu1" class="list-group-item in collapsed" data-toggle="collapse" data-parent="#SubMenu1">Standard Post</a>
										<div class="collapse list-group-submenu" id="SubMenu1">
											<a href="#" class="list-group-item" data-parent="#SubMenu1">Standard Layout 1</a>
											<a href="#" class="list-group-item" data-parent="#SubMenu1">Standard Layout 2</a>
											<a href="#SubSubMenu1" class="collapsed in list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Standard 3 </a>
											<div class="list-group-submenu" id="SubSubMenu1">
												<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Standard</a>
												<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Standard</a>
											</div>
										</div>
										<a href="#" class="list-group-item">Gallery Post</a>
										<a href="#" class="list-group-item">Video Post</a>
										<a href="#" class="list-group-item">Image Post</a>
										<a href="#" class="list-group-item">Audio Post</a>
										<a href="#" class="list-group-item">Quote Post</a>
										<a href="#" class="list-group-item">Link Post</a>
									</div>
								</div>
							</div>
							<!-- category-list -->
						</div>

Panel List Style Two(Front-Toggle)

						<div class="col-md-3">
							<div id="MainMenu1">
								<div class="list-group panel ex-panel front-toggle border-none">
									<a href="#demo" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu3">Menu List</a>
									<div class="collapse in" id="demo2">
										<a href="#SubMenu3" class="list-group-item in collapsed" data-toggle="collapse" data-parent="#SubMenu3">Standard Post</a>
										<div class="collapse list-group-submenu" id="SubMenu3">
											<a href="#" class="list-group-item" data-parent="#SubMenu3">Standard Layout 1</a>
											<a href="#" class="list-group-item" data-parent="#SubMenu3">Standard Layout 2</a>
											<a href="#SubSubMenu3" class="collapsed in list-group-item" data-toggle="collapse" data-parent="#SubSubMenu3">Standard 3 </a>
											<div class="list-group-submenu" id="SubSubMenu3">
												<a href="#" class="list-group-item" data-parent="#SubSubMenu3">Standard</a>
												<a href="#" class="list-group-item" data-parent="#SubSubMenu3">Standard</a>
											</div>
										</div>
										<a href="#" class="list-group-item">Gallery Post</a>
										<a href="#" class="list-group-item">Video Post</a>
										<a href="#" class="list-group-item">Image Post</a>
										<a href="#" class="list-group-item">Audio Post</a>
										<a href="#" class="list-group-item">Quote Post</a>
										<a href="#" class="list-group-item">Link Post</a>
									</div>
								</div>
							</div>
							<!-- category-list -->
						</div>

Piechart

You can pie-chart with following styles.

Default Pie Chart

						<div class="row">
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="70" data-barcolor="#1ABC9C" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="150"><span class=" vertical-middle"></span></div>
								<!-- Title -->
								<h5 class="text-center">Wordpress</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="85" data-barcolor="#1ABC9C" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="150"><span class=" vertical-middle"></span></div>
								<!-- Title -->
								<h5 class="text-center">HTML</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="68" data-barcolor="#1ABC9C" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="150">	<span class=" vertical-middle"></span></div>
								<!-- Title -->
								<h5 class="text-center">E-commerce</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="99" data-barcolor="#1ABC9C" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="150"><span class=" vertical-middle"></span></div>
								<!-- Title -->
								<h5 class="text-center">Great Support</h5>
							</div>
						</div>

Pie Chart Color

						<div class="row">
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="70" data-barcolor="#1ABC9C" data-easing="easeOutBounce" data-trackcolor="#fff" data-linewidth="15" data-size="200">
									<div class=" vertical-middle">
										<span></span>
										<h5 class="text-center">Wordpress</h5>
									</div>
								</div>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="85" data-barcolor="#E67E22" data-easing="easeOutBounce" data-trackcolor="#fff" data-linewidth="15" data-size="200">
									<div class=" vertical-middle">
										<span></span>
										<h5 class="text-center">HTML</h5>
									</div>
								</div>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="68" data-barcolor="#16B6EA" data-easing="easeOutBounce" data-trackcolor="#fff" data-linewidth="15" data-size="200">
									<div class=" vertical-middle">
										<span></span>
										<h5 class="text-center">E-commerce</h5>
									</div>
								</div>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="99" data-barcolor="#E74C3C" data-easing="easeOutBounce" data-trackcolor="#fff" data-linewidth="15" data-size="200">
									<div class=" vertical-middle">
										<span></span>
										<h5 class="text-center">E-commerce</h5>
									</div>
								</div>
							</div>
						</div>

Pie Chart Style 2

						<div class="row">
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="70" data-barcolor="#1ABC9C" data-easing="easeInCubic" data-trackcolor="#fff" data-linewidth="5" data-size="175">
									<span class=" vertical-middle icon-shape-circle text-color fa-3x icon-light-bg"></span>
								</div>
								<!-- Title -->
								<h5 class="text-center">Wordpress</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="85" data-barcolor="#1ABC9C" data-easing="easeInCubic" data-trackcolor="#fff" data-linewidth="5" data-size="175">
									<span class=" vertical-middle icon-shape-circle text-color fa-3x icon-light-bg"></span>
								</div>
								<!-- Title -->
								<h5 class="text-center">HTML</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="68" data-barcolor="#1ABC9C" data-easing="easeInCubic" data-trackcolor="#fff" data-linewidth="5" data-size="175">
									<span class=" vertical-middle icon-shape-circle text-color fa-3x icon-light-bg"></span>
								</div>
								<!-- Title -->
								<h5 class="text-center">E-commerce</h5>
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- number -->
								<div class="piechart" data-percent="99" data-barcolor="#1ABC9C" data-easing="easeInCubic" data-trackcolor="#fff" data-linewidth="5" data-size="175">
									<span class=" vertical-middle icon-shape-circle text-color fa-3x icon-light-bg"></span>
								</div>
								<!-- Title -->
								<h5 class="text-center">Great Support</h5>
							</div>
						</div>

Pie Chart Info box

						<div class="row">
							<div class="col-sm-4 col-md-3">
								<!-- FEATURE BOX -->
								<div class="feature-box style-3">
									<div class="icon-wrapper piechart" data-percent="70" data-barcolor="#1ABC9C" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="50">
										<span></span>
									</div>	
									<div class="inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<!-- FEATURE DESCRIPTION -->
										<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
									</div>	
								</div><!-- /.FEATURE BOX -->
							</div>
							<div class="col-sm-4 col-md-3">
								<!-- FEATURE BOX -->
								<div class="feature-box style-3">
									<div class="icon-wrapper piechart" data-percent="85" data-barcolor="#16B6EA" data-trackcolor="#f5f5f5" data-linewidth="5" data-size="50">
										<span></span>
									</div>
									<div class="inner-wrapper">
										<div class="title-wrapper">
											<!-- FEATURE TITLE -->
											<h4 class="feature-title">Info Title</h4>
										</div>
										<!-- FEATURE DESCRIPTION -->
										<p class="feature-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
									</div>	
								</div><!-- /.FEATURE BOX -->
							</div>
							 ....
							 ....
						</div>

Pricing

You can add pricing table with following styles.

Pricing Box [Type 1]

You can add this class class="pricing-head theme-bg typo-light" for pricing heading with theme color background.

						<div class="row">
							<div class="col-sm-6 col-md-3">
								<!-- PRICING WRAPPER -->
								<div class="pricing-wrapper">
									<!-- PRICING HEAD -->
									<div class="pricing-head theme-bg typo-light">
										<!-- PRICING TITLE -->
										<h4 class="pricing-title text-uppercase">Standard</h4>
										<!-- PRICING SUB TITLE -->
										<p class="price-sub">Starting at</p>
										<!-- PRICE -->
										<h2 class="price font-weight-light"><span class="unit">$</span>18<span class="duration">/ mon</span></h2>
									</div><!-- /. PRICING HEAD -->
									<!-- PRICING DETAILS -->
									<div class="pricing-details">
										<!-- PRICING LIST -->
										<ul>
											<li>Magento</li>
											<li>Wordpress</li>
											<li>HTML5 & CSS 3</li>
											<li>PSD Files</li>
											<li>Unlimited Support</li>
										</ul>
									</div><!-- /. PRICING DETAILS -->
									<!-- PRICING BUTTON BLOCK -->
									<div class="pricing-btn-block grey-bg">
										<!-- PRICING BUTTON -->
										<button class="btn btn-block btn-theme btn-hv-dark btn-square btn-default" type="button">Sign Up</button>
									</div><!-- /. PRICING BUTTON BLOCK -->
								</div><!-- /. PRICING WRAPPER -->
							</div>
						</div>

Pricing Box [Type 2]

						<div class="row">
							<div class="col-sm-6 col-md-3">
								<!-- PRICING WRAPPER -->
								<div class="pricing-wrapper">
									<!-- PRICING HEAD -->
									<div class="pricing-head">
										<!-- PRICING TITLE -->
										<h4 class="pricing-title text-uppercase">Standard</h4>
									</div><!-- /. PRICING HEAD -->
									<!-- PRICING DETAILS -->
									<div class="pricing-details">
										<!-- PRICING SUB TITLE -->
										<p class="price-sub">Starting at</p>
										<!-- PRICE -->
										<h2 class="price text-color bottom-line"><span class="unit">$</span>18<span class="duration">/ mon</span></h2>
										<!-- PRICING LIST -->
										<ul>
											<li>Magento</li>
											<li>Wordpress</li>
											<li>HTML5 & CSS 3</li>
											<li>PSD Files</li>
											<li>Unlimited Support</li>
										</ul>
									</div><!-- /. PRICING DETAILS -->
									<!-- PRICING BUTTON BLOCK -->
									<div class="pricing-btn-block grey-bg">
										<!-- PRICING BUTTON -->
										<button class="btn btn-block btn-info btn-hv-dark btn-square btn-default" type="button">Sign Up</button>
									</div><!-- /. PRICING BUTTON BLOCK -->
								</div><!-- /. PRICING WRAPPER -->
							</div>
						</div>

Pricing Box [Type 3]

You can add this class class="v-shape theme-bg typo-light" to show the v-shape style with theme background color for pricing heading.

						<div class="row">
							<div class="col-sm-6 col-md-3">
								<!-- PRICING WRAPPER -->
								<div class="pricing-wrapper">
									<!-- PRICING HEAD -->
									<div class="pricing-head v-shape theme-bg typo-light">
										<!-- PRICING TITLE -->
										<h4 class="pricing-title text-uppercase">Standard</h4>
									</div><!-- /. PRICING HEAD -->
									<!-- PRICING DETAILS -->
									<div class="pricing-details">
										<!-- PRICING SUB TITLE -->
										<p class="price-sub">Starting at</p>
										<!-- PRICE -->
										<h2 class="price text-color font-weight-light bottom-line"><span class="unit">$</span>18<span class="duration">/ mon</span></h2>
										<!-- PRICING LIST -->
										<ul>
											<li>Magento</li>
											<li>Wordpress</li>
											<li>HTML5 & CSS 3</li>
											<li>PSD Files</li>
										</ul>
									</div><!-- /. PRICING DETAILS -->
									<!-- PRICING BUTTON BLOCK -->
									<div class="pricing-btn-block grey-bg">
										<!-- PRICING BUTTON -->
										<button class="btn btn-block btn-theme btn-outline btn-hv-dark btn-hvfill-bottom btn-square btn-default" type="button">Sign Up</button>
									</div><!-- /. PRICING BUTTON BLOCK -->
								</div><!-- /. PRICING WRAPPER -->
							</div>
						</div>

Pricing Box [Type 4]

You can add this class class="v-shape" to show the v-shape style for pricing heading.

You can add attribute data-bgcolor="#FFC400" to show the pricing heading with background color.

You can add this classes class="fa fa-balance-scale fa-3x icon-shape-circle icon-hvlight icon-hvdark-bg icon-grey-bg" to show the icon in different style.

						<div class="row">
							<div class="col-sm-6 col-md-3">
								<!-- PRICING WRAPPER -->
								<div class="pricing-wrapper hv-wrapper border-none">
									<!-- PRICING HEAD -->
									<div class="pricing-head v-shape typo-light" data-bgcolor="#FFC400">
										<!-- PRICING TITLE -->
										<h4 class="pricing-title text-uppercase">Standard</h4>
									</div><!-- /. PRICING HEAD -->
									<!-- PRICING DETAILS -->
									<div class="pricing-details">
										<!-- ICON WRAPPER -->
										<div class="icon-wrapper"><i class="fa fa-balance-scale fa-3x icon-shape-circle icon-hvlight icon-hvdark-bg icon-grey-bg"></i></div>
										<!-- PRICE -->
										<h2 class="price font-weight-light bottom-line grey-line"><span class="unit">$</span>18<span class="duration">/ mon</span></h2>
										<!-- PRICING LIST -->
										<ul>
											<li>Magento</li>
											<li>Wordpress</li>
											<li>HTML5 & CSS 3</li>
											<li>PSD Files</li>
										</ul>
									</div><!-- /. PRICING DETAILS -->
									<!-- PRICING BUTTON BLOCK -->
									<div class="pricing-btn-block grey-bg">
										<!-- PRICING BUTTON -->
										<button class="btn btn-block btn-warning btn-hv-dark btn-3d btn-square btn-default" type="button">Sign Up</button>
									</div><!-- /. PRICING BUTTON BLOCK -->
								</div><!-- /. PRICING WRAPPER -->
							</div>
						</div>

Pricing Box [Color Variation]

You can add this class class="grey-bg" to show the grey background for pricing box header.

You can add this class class="dark-bg typo-light" to show the dark background for pricing box header.

You can add this class class="theme-bg typo-light" to show the dark background for pricing box header.

						<div class="row">	
							<div class="col-sm-6 col-md-3">
								<!-- PRICING WRAPPER -->
								<div class="pricing-wrapper">
									<!-- RIBBON WRAPPER -->
									<div class="pricing-ribbon-wrapper">
										<div class="pricing-ribbon btn-info">Offer</div>
									</div><!-- /. RIBBON WRAPPER -->
									<!-- PRICING HEAD -->
									<div class="pricing-head grey-bg">
										<!-- PRICING TITLE -->
										<h4 class="pricing-title text-uppercase">Standard</h4>
										<!-- PRICING SUB TITLE -->
										<p class="price-sub">Starting at</p>
										<!-- PRICE -->
										<h2 class="price font-weight-light text-color"><span class="unit">$</span>18<span class="duration">/ mon</span></h2>
									</div><!-- /. PRICING HEAD -->
									<!-- PRICING DETAILS -->
									<div class="pricing-details">
										<!-- PRICING LIST -->
										<ul>
											<li>Magento</li>
											<li>Wordpress</li>
											<li>HTML5 & CSS 3</li>
											<li>PSD Files</li>
											<li>Unlimited Support</li>
										</ul>
									</div><!-- /. PRICING DETAILS -->
									<!-- PRICING BUTTON BLOCK -->
									<div class="pricing-btn-block grey-bg">
										<!-- PRICING BUTTON -->
										<button class="btn btn-block btn-theme btn-hv-dark btn-square btn-default" type="button">Sign Up</button>
									</div><!-- /. PRICING BUTTON BLOCK -->
								</div><!-- /. PRICING WRAPPER -->
							</div>								
							.......
							.......
						</div>

Tabs

You can add pricing table with following styles.

Default Tab

						<div class="row">
							<div class="col-sm-6">
							<h4 class="section-title bottom-line">Bootstrap <span class="font-weight-light">Tab</span></h4>
								 <!-- TABS -->
								<div role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active"><a href="#tab-1" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-2" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-3" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-4" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-1">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-2">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-3">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-4">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Light Bg Tab

You can add this class class="light-bg" in content div to get the light bg tab.

						<div class="row">
							<div class="col-sm-6">
							<h4 class="section-title bottom-line">Bootstrap <span class="font-weight-light">Tab</span></h4>
								 <!-- TABS -->
								<div role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active"><a href="#tab-1" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-2" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-3" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-4" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content light-bg">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-1">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-2">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-3">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-4">
											<p>Temporibus autem quibusdam et aut debitis aut rerum necessitatibus saepe eveniet ut et.</p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Arrow Tab

You can add this class class="arrow-style" in ul class to get the arrow style for tab.

						<div class="row">
							<div class="col-sm-6">
							<h4 class="section-title bottom-line">Tab <span class="font-weight-light">Style 1</span></h4>
								 <!-- TABS -->
								<div role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs flat-style arrow-style" role="tablist">
										<li role="presentation" class="active"><a href="#tab-21" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-22" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-23" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-24" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-21">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-22">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-23">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-24">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus </p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Transparent Arrow Tab Right Align

You can add this class class="arrow-style-bordered" in ul class to get the transparent arrow for tab.

						<div class="row">
							<div class="col-sm-6">
							<h4 class="section-title bottom-line">Tab <span class="font-weight-light">Style 4</span></h4>
								 <!-- TABS -->
								<div role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs arrow-style-bordered flat-style bordered-style text-right" role="tablist">
										<li role="presentation" class="active"><a href="#tab-36" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-37" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-38" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-39" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content light-bg typo-dark">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-36">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-37">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-38">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-39">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Bottom Line Tab

You can add this class class="bottom-line-style" in ul class to get the bottom line style for tab.

						<div class="row">
							<div class="col-sm-6">
							<h4 class="section-title bottom-line">Tab <span class="font-weight-light">Style 2</span></h4>
								 <!-- TABS -->
								<div role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs flat-style dark-style bottom-line-style" role="tablist">
										<li role="presentation" class="active"><a href="#tab-61" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-62" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-63" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-64" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content dark-bg typo-light">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-61">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-62">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-63">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-64">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Full Border Tab

You can add this class class="bordered-style" in ul class to get the full bordered style for tab.

						<div class="row">
							<div class="col-sm-6">
								<h4 class="section-title bottom-line">Vertical Tab <span class="font-weight-light">Style 3</span></h4>
								<!-- TABS -->
								<div role="tabpanel" class="tabs-left">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs flat-style dark-style bordered-style" role="tablist">
										<li role="presentation" class="active"><a href="#tab-26" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-27" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-28" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-29" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content dark-bg typo-light">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-26">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-27">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-28">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-29">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod vel officia provident.</p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Vertical Align Tab

You can add this class class="tabs-left" in tab div to get the vertical style for tab.

						<div class="row">
							<div class="col-sm-6">
								<h4 class="section-title bottom-line">Vertical Tab <span class="font-weight-light">Style 4</span></h4>
								<!-- TABS -->
								<div role="tabpanel" class="tabs-left">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs flat-style arrow-style-bordered bordered-style" role="tablist">
										<li role="presentation" class="active"><a href="#tab-46" aria-controls="home" role="tab" data-toggle="tab">Tab-1</a></li>
										<li role="presentation"><a href="#tab-47" aria-controls="profile" role="tab" data-toggle="tab">Tab-2</a></li>
										<li role="presentation"><a href="#tab-48" aria-controls="messages" role="tab" data-toggle="tab">Tab-3</a></li>
										<li role="presentation"><a href="#tab-49" aria-controls="settings" role="tab" data-toggle="tab">Tab-4</a></li>
									</ul>
									<!-- /. Nav tabs-->
									<!-- Tab panes -->
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane fade in active" id="tab-46">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-47">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-48">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab-49">
											<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet. </p>
										</div>
									</div>
									<!-- /. Tab panes -->
								</div>
								<!-- /. TABS -->
							</div>
						</div>

Progress

You can add progress bar with following styles.

Progress bar Default

						<div class="row">
							<div class="col-md-6 margin-bottom-50">
								<!-- PROGRESS BAR -->
								<h6>Graphic Design</h6>
								<div class="progress">
									<div data-percentage="60" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
										<span class="progress-label typo-light">60%</span>
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>HTML 5</h6>
								<div class="progress">
									<div data-percentage="65" aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar">
										<span class="progress-label typo-light">65%</span>
									</div>
								</div>
							</div>
						</div>

Progress bar Animated

						<div class="row">
							<div class="col-md-6">
								<!-- PROGRESS BAR -->
								<h6>Graphic Design<span class="pull-right progress-label">60%</span></h6>
								<div class="progress progress-striped active square grey-bg lable-on-top" data-height="10">
									<div data-percentage="60" aria-valuemax="100" data-bg="" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar dark-bg">
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>HTML 5<span class="pull-right progress-label">65%</span></h6>
								<div class="progress progress-striped active square grey-bg lable-on-top" data-height="10">
									<div data-percentage="65" aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar dark-bg">
									</div>
								</div>
							</div>
						</div>

Progress bar Colored

						<div class="row">
							<div class="col-md-6 margin-bottom-50">
								<!-- PROGRESS BAR -->
								<h6>Graphic Design</h6>
								<div class="progress square dark-bg lable-on-top" data-height="10">
									<div data-percentage="60" aria-valuemax="100" data-bg="#ffc400" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label">60%</span>
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>HTML 5</h6>
								<div class="progress square dark-bg lable-on-top" data-height="10">
									<div data-percentage="65" aria-valuemax="100" data-bg="#FC6234" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label">65%</span>
									</div>
								</div>
							</div>
						</div>

Progress bar Label Top Circle

						<div class="row">
							<div class="col-md-6 margin-bottom-50">
								<!-- PROGRESS BAR -->
								<h6>CSS3</h6>
								<div class="progress circle dark-bg lable-on-top" data-height="10">
									<div data-percentage="60" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label dark-bg typo-light">60%</span>
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>Wordpress</h6>
								<div class="progress circle dark-bg lable-on-top" data-height="10">
									<div data-percentage="65" aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label dark-bg typo-light">65%</span>
									</div>
								</div>
							</div>
						</div>

Progress bar Label Top Square

						<div class="row">
							<div class="col-md-6 margin-bottom-50">
								<!-- PROGRESS BAR -->
								<h6>Graphic Design</h6>
								<div class="progress square dark-bg lable-on-top" data-height="10">
									<div data-percentage="60" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label dark-bg typo-light">60%</span>
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>HTML5</h6>
								<div class="progress square dark-bg lable-on-top" data-height="10">
									<div data-percentage="65" aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label dark-bg typo-light">65%</span>
									</div>
								</div>
							</div>
						</div>

Progress bar Label Top Transparent

						<div class="row">
							<div class="col-md-6 margin-bottom-50">
								<!-- PROGRESS BAR -->
								<h6>Graphic Design</h6>
								<div class="progress lable-on-top" data-height="10">
									<div data-percentage="60" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label">60%</span>
									</div>
								</div>
								<!-- PROGRESS BAR -->
								<h6>HTML5</h6>
								<div class="progress lable-on-top" data-height="10">
									<div data-percentage="65" aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" role="progressbar" class="progress-bar theme-bg">
										<span class="progress-label">65%</span>
									</div>
								</div>
							</div>
						</div>