1. Introduction
WrapKit is powerful and easy to use Web UI Kit. It allows you to create anything like complete websites, landing pages, coming soon, homepages etc in no-time. It comes with some stunning pre-build niche demos to make your life even easier to use it directly for your projects. WrapKit is build on Bootstrap 4, which is responsive CSS Framework.
WrapKit contains 25+ Niche Homepages, 180+ Pre-Made Sections, 500+ UI Elements, 2000+ Premium Font Icons & counting.., which allows you to create anything you want in few minutes. Our ready to use sections will allow you to just drag and drop it to new page with well defined guide of what CSS, HTML & JS code you would required to use each section, which makes it even easier to create something amazing in no-time. We are bound to update our kit and we keep adding new things to make it even stronger day by day. You will receive all updates free for lifetime.
This documentation will guide you about how to use our UI Kit to create your own projects faster.
Author: Wrappixel / Nirav Joshi
Contact: info@wrappixel.com / niravjoshi87@gmail.com
Follow: twitter.com/wrappixel
Like: facebook.com/wrappixel
website: https://wrappixel.com
1.1 Installation Guide
This is the static html template so its so easy to install. we also provided predefine demos which you can directly use.
Just simple steps to follow:
Demo Folder (i.e. Charity) + assets (folder) = Theme Ready.
Logo
This is for Brand identity means logo - you can simply us this code and replace the logo image from the code
<nav class="navbar navbar-expand-lg h6-nav-bar">
<a href="javascript:void(0)" class="navbar-brand"><img src="../assets/images/logos/white-text.png" alt="wrapkit"></a>
</nav>
Banners - how to use
We have created 10 static banners, you can use any of them by just click on the view code button on that page. simply copy and paste that code into
your page and also paste css. if you want to use scss file then you can get that from the: scss/sliders/static-slider1-10.scss. we organized it with well-commented.
Form Banners - how to use
We have created 9 form banners, you can use any of them by just click on the view code button on that page. simply copy and paste that code into
your page and also paste css. if you want to use scss file then you can get that from the: scss/form-banner/form-banner1-10.scss. we organized it with well-commented.
Call to Action - how to use
We have created 10 Call to Action, you can use any of them. you can use this call to actions in any page you want you have to follow simple step below
- Open call-to-action.html in your editor
- copy the code of your desire call to action we have commented all
- and you can find the related css file from
css/c2a/c2a.cssand if you want scss then copy it from here:scss/c2a/c2a.scss
Check Live preview
Sliders - how to use
We have created 10 sliders, you can use any of them by just click on the check slider code button on that page. simply copy and paste that code into
your page and also paste css. if you want to use scss file then you can get that from the: scss/sliders/slider1-2-3-4 so on....scss. we organized it with well-commented.
Contacts - how to use
We have created beatiful 4 contact blocks. you can use this blocks in any page you want, you have to follow simple step:
- Open contacts-forms.html in your editor
- copy the code of your desire contact section, we have given it with well commented
- and you can find the related css file from
css/contact/contact.css.and if you want scss then copy it from here:scss/contact/contact.scss.
Check Live preview
Blog Homepage - how to use
We have created beatiful 6 Blog blocks for homepage. you can use this blocks in any page you want, you have to follow simple step:
- Open blog-homepage.html in your editor
- copy the code of your desire blog section, we have given it with well commented
- and you can find the related css file from
css/blog/blog-homepage.cssand if you want scss then copy it from here:scss/blog/blog-homepage.scss.
Check Live preview
Pricing - how to use
We have created 8 beatiful pricing tables. you can use this blocks in any page you want, you have to follow simple step:
- Open pricing.html in your editor
- copy the code of your desire pricing section that you want, we have given it with well commented
- and you can find the related css file from
css/pricing/pricing.cssand if you want scss then copy it from here:scss/pricing/pricing.scss. - For monthly and yearly pricing toggle, thare is small script which is included in that bottom of the page.
Check Live preview
Teams - how to use
We have created 4 beatiful Team sections that you may like. you can use this blocks in any page you want, you have to follow simple step:
- Open teams.html in your editor
- copy the code of your desire pricing section that you want, we have given it with well commented
- and you can find the related css file from
css/team/team.cssand if you want scss then copy it from here:scss/team/team.scss.
Check Live preview
Testimonial - how to use
We have created 10 awesome Testimonial sections that you may like. you can use this blocks in any page you want, you have to follow simple step:
- Open testimonial.html in your editor
- copy the code of your desire pricing section that you want, we have given it with well commented
- and you can find the related css file from
css/testimonials/testimonials.cssand if you want scss then copy it from here:scss/testimonials/testimonials.scss. - also there is one js you have to include which is
../assets/node_modules/owl.carousel/dist/owl.carousel.min.js - we have also created init file for the testimonial you can find that in
js/testimonial/testimonial.js
Check Live preview
Features 1 to 50 - how to use
We have created 50 features sections that you may like, you can use any of them by just click on the view code button on that page. simply copy and paste that code into your page and also paste css. if you want to use scss file then you can get that from the: scss/features/feature1-10.scss so on 41-50.scss. we organized it with well-commented.
Pages - how to use
We have created 13 innerpages that you may like, you can use any of them by copy repactive page code from the file. simply copy and paste that code into your page and also paste css. if you want to use scss file then you can get respactive page scss file. we organized it with well-commented.
Shop pages- how to use
We have created 7 innerpages for shop that you may like, you can use any of them by copy repactive page code from the file. simply copy and paste that code into your page and also paste css. if you want to use scss file then you can get respactive page scss file. we organized it with well-commented.
PSD -How to download psd
As the psd file is too large so please contact us on info@wrappixel.com with your purchase key we will provide you download link.
Start the html
You can start the html with this predefine code , it has the all the css which is needed for the template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
<title>Wrapkit - The awesome and beautiful ui kit</title>
<!-- Bootstrap Core CSS -->
<link href="../../assets/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- This is for the animation CSS -->
<link href="../../assets/node_modules/aos/dist/aos.css" rel="stylesheet">
<!-- This page plugin css -->
<link href="../assets/node_modules/bootstrap-touch-slider/bootstrap-touch-slider.css" rel="stylesheet" media="all">
<link href="../assets/node_modules/owl.carousel/dist/assets/owl.theme.green.css" rel="stylesheet">
<!-- This css we made it from our predefine componenet
we just copy that css and paste here you can also do that -->
<link href="css/demo.css" rel="stylesheet">
<!-- Common style CSS -->
<link href="css/style.css" rel="stylesheet">
<link href="css/yourstyle.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Header with logo & navigation
From this you can create responsive navigation simple copy this html and copy the css from css/headers/headers1-10.css thats it
<div class="header1 po-relative">
<div class="container">
<!-- Header 1 code -->
<nav class="navbar navbar-expand-lg h1-nav">
<a class="navbar-brand" href="#"><img src="../assets/images/logos/green-logo.png" alt="wrapkit" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header1" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="ti-menu"></span>
</button>
<div class="collapse navbar-collapse" id="header1">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Work</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="h1-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services <i class="fa fa-angle-down m-l-5"></i>
</a>
<ul class="b-none dropdown-menu animated fadeInUp">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle dropdown-item" data-toggle="dropdown" href="#" data-toggle="dropdown">Dropdown <i class="fa fa-angle-right ml-auto"></i></a>
<ul class="dropdown-menu b-none menu-right">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">One more separated link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">One more separated link</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Freebies</a></li>
<li class="nav-item"><a class="btn btn-outline-success" href="#">Hire Me</a></li>
</ul>
</div>
</nav>
<!-- End Header 1 code -->
</div>
</div>
Middle content
You can implement the middle content between the wrapper and page-wrapper.
<div id="main-wrapper">
<div class="topbar">...Navigation code...</div>
<div class="page-wrapper">...Page content goes here...</div>
<div class="footer">...Footer...</div>
</div>
Js file included in footer
This are the js files which is needed for the page you have to build
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../../assets/node_modules/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<script src="../../assets/node_modules/popper/dist/popper.min.js"></script>
<script src="../../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- This is for the animation -->
<script src="../../assets/node_modules/aos/dist/aos.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--This is for the slider -->
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="../assets/node_modules/bootstrap-touch-slider/bootstrap-touch-slider.js"></script>
<!--This is for the testimonial slider -->
<script src="../assets/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
Custom js file understanding
You can implement the middle content between the wrapper and page-wrapper.
$(function () {
"use strict";
// ==============================================================
//This is for preloader
// ==============================================================
$(function () {
$(".preloader").fadeOut();
});
// ==============================================================
// For page-wrapper height
// ==============================================================
var set = function () {
var topOffset = 390;
var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
height = height - topOffset;
if (height < 1) height = 1;
if (height > topOffset) {
$(".page-wrapper").css("min-height", (height) + "px");
}
};
$(window).ready(set);
$(window).on("resize", set);
// ==============================================================
//Tooltip
// ==============================================================
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// ==============================================================
//Popover
// ==============================================================
$(function () {
$('[data-toggle="popover"]').popover()
})
// ==============================================================
// For mega menu and nav submenu
// ==============================================================
jQuery(document).on('click', '.mega-dropdown', function (e) {
e.stopPropagation()
});
jQuery(document).on('click', '.navbar-nav > .dropdown', function(e) {
e.stopPropagation();
});
$(".dropdown-submenu").click(function(){
$(".dropdown-submenu > .dropdown-menu").toggleClass("show");
});
// ==============================================================
// Resize all elements
// ==============================================================
$("body").trigger("resize");
// ==============================================================
//Fix header while scroll
// ==============================================================
var wind = $(window);
wind.on("load", function() {
var bodyScroll = wind.scrollTop(),
navbar = $(".topbar");
if (bodyScroll > 100) {
navbar.addClass("fixed-header animated slideInDown")
} else {
navbar.removeClass("fixed-header animated slideInDown")
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= 200) {
$('.topbar').addClass('fixed-header animated slideInDown');
$('.bt-top').addClass('visible');
} else {
$('.topbar').removeClass('fixed-header animated slideInDown');
$('.bt-top').removeClass('visible');
}
});
// ==============================================================
// Animation initialized
// ==============================================================
AOS.init();
// ==============================================================
// Back to top
// ==============================================================
$('.bt-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
// ==============================================================
// Modal video stop on close
// ==============================================================
$('.modal').on('hidden.bs.modal', function () {
callPlayer('yt-player', 'stopVideo');
});
// ==============================================================
// Perfact scrollbar
// ==============================================================
$('.pre-scroll, .h17-main-nav').perfectScrollbar();
});
Accordions - how to use
To create basic accordions, the code is given below. You can just copy and paste this code in your file and your accordion will be ready. To use different styles of accordions, check the live page link.
<div class="col-md-6">
<div class="card" data-aos="flip-up" data-aos-duration="1200">
<div id="accordion2" class="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse1" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse3" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
</div>
</div>
</div>
</div>
Check live preview of Accordions
Animations - how to use
We have used 2 types of animations in this UI Kit.
1). It can be applied using class. for ex: .animated .bounce.
2). It can be applied using data-aos attribute. for ex: <div data-aos="fade-up"></div>
Check the live preview of other animation effects.
Various Bootstrap Components - how to use
We have redesigned many default bootstrap components. To use them in your project, just check the below link.
Check live preview of Various Bootstrap ComponentsBreadcrumbs - how to use
To use the breadcrumbs, use class .breadcrumb. Below is the basic breadcrumb code.
<ol class="breadcrumb m-b-10">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb m-b-10">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb m-b-10">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
Check live preview of Breadcrumbs
Buttons - how to use
There are many styles of buttons available in this UI Kit. To check all the styles, check the buttons page.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-outline-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-outline-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-outline-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-outline-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
</div>
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-rounded btn-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-danger">Danger</button>
</div>
Check live preview of Buttons
Cards - how to use
To use the cards, use class .card. Below is the basic card code.
<div class="card">
<img class="card-img-top img-responsive" src="../assets/images/ui/img2.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Check live preview of Cards
Carousel - how to use
Below is the example code of carousel. Also check the carousel page for more.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="img-responsive" src="../assets/images/ui/img1.jpg" alt="First slide"> </div>
<div class="carousel-item"> <img class="img-responsive" src="../assets/images/ui/img2.jpg" alt="Second slide"> </div>
<div class="carousel-item"> <img class="img-responsive" src="../assets/images/ui/img3.jpg" alt="Third slide"> </div>
</div>
</div>
Check live preview of Carousel
Counter - how to use
You can take html code from the HTML file.
Give .counter class to the div.
Add js/jquery.waypoints.min.js and js/jquery.counterup.min.js before body tag and initialize the plugin by $('.counter').counterUp({delay: 10});
All the files are well commented.
Custom Modals - how to use
You can take html code from the HTML file. All the files are well commented.
Check live preview of Custom ModalsDropdowns - how to use
There are various style of dropdowns availabel. You can get their code by clicking on the get code button. All the files are well commented.
Check live preview of DropdownsForms - how to use
Below is the sample basic form. Checkout the form page for more form types.
<form>
<div class="form-group">
<label for="exampleInputEmail1">User Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox">
<label for="checkbox1"> Remember me </label>
</div>
</div>
<button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
<button type="submit" class="btn btn-inverse waves-effect waves-light">Cancel</button>
</form>
Check live preview of Forms
List & Media - how to use
Below is the code snippet of basic listing. Checkout the list and media page for more listing styles.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Check live preview of List
Modal - how to use
Below is the example code snippet of modal. Checkout the modals page for more modal styles.
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect text-left" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Check live preview of Modals
Notifications - how to use
Below is the code snippet of alert notification. Checkout the notification page for more alert styles.
<div class="alert alert-primary" role="alert">
This is a primary alert with. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with. Give it a click if you like.
</div>
Check live preview of Notification
Overlay - how to use
Below is the code snippet of Overlay. Checkout the overlay page to know how it is used.
<div class="card m-t-20">
<img class="card-img" src="../assets/images/ui/img5.jpg" alt="Card image">
<div class="card-img-overlay bg-dark op-7 p-40">
<h4 class="card-title text-white">Traveller's Blog</h4>
<p class="card-text text-white op-7">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
<p class="card-text">Last updated 3 mins ago</p>
<button class="btn btn-info-gradiant font-14">Explore More</button>
</div>
</div>
Check live preview of Overlay
Progressbar - how to use
Below is the code snippet of progressbar. Checkout the progressbar page to know how it is used.
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
Check live preview of Progressbar
Tabs - how to use
Below is the code snippet of default tab. Checkout the tabs page to know how it is used.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab"><span class="hidden-sm-up"><i class="ti-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="p-20">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
<div class="tab-pane p-20" id="profile" role="tabpanel">2</div>
<div class="tab-pane p-20" id="messages" role="tabpanel">3</div>
</div>
Check live preview of Tabs
Tables - how to use
Below is the code snippet of basic table. Checkout the tables page to know how it is used.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Deshmukh</td>
<td>Prohaska</td>
<td>@Genelia</td>
<td><span class="label label-danger">admin</span> </td>
</tr>
<tr>
<td>2</td>
<td>Deshmukh</td>
<td>Gaylord</td>
<td>@Ritesh</td>
<td><span class="label label-info">member</span> </td>
</tr>
<tr>
<td>3</td>
<td>Sanghani</td>
<td>Gusikowski</td>
<td>@Govinda</td>
<td><span class="label label-warning">developer</span> </td>
</tr>
<tr>
<td>4</td>
<td>Roshan</td>
<td>Rogahn</td>
<td>@Hritik</td>
<td><span class="label label-success">supporter</span> </td>
</tr>
<tr>
<td>5</td>
<td>Joshi</td>
<td>Hickle</td>
<td>@Maruti</td>
<td><span class="label label-info">member</span> </td>
</tr>
<tr>
<td>6</td>
<td>Nigam</td>
<td>Eichmann</td>
<td>@Sonu</td>
<td><span class="label label-success">supporter</span> </td>
</tr>
</tbody>
</table>
</div>
Check live preview of Table
Tooltip & Popover - how to use
Checkout the Tooltip & Popover page.
Check live preview of Tooltip & PopoverTyped Text - how to use
This effect requires a .typewrite class and js/type.js at the bottom of the page and data-type attribute. data-period attribute is optional. The data-type attribute should contain a list of strings to type separated by commas.
<h6 class="title">I’m Angelina Doe, Web Designer & Good at <span class="text-info-gradiant typewrite" data-period="2000" data-type='[ "Photoshop", "HTML", "CSS3", "Angular CLI" ]'></span></h6>
Check live preview of Typed Text
Video Inline - how to use
The video style allows you to embed a video using an iframe from service providers such as Youtube, Vimeo etc. Additionally you can use your own cover image and theme-consistent play button to maintain full visual control over the page. Check the video page to know about another video inline style.
<div class="card card-shadow" data-aos="flip-up" data-aos-duration="1200">
<img class="card-img-top video-img" src="../assets/images/ui/video.jpg" alt="wrappixel kit">
<div class="embed-responsive hide embed-responsive-16by9" data-animation="animated fadeIn">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TPt4m7i9dRk?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Check live preview of Video