Wrapkit

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: [email protected] / [email protected]
Follow: twitter.com/wrappixel
Like: facebook.com/wrappixel
website: https://wrappixel.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules.

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.

Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of wrapkit comes it does not affect your code.
Note: We have already built few demos to start with. However, if you still want to customize the template on your own, you can choose from our wide range of components and elements. To do that, keep reading the docs.
Note: We also provided one folder called start your own, you can use that and make your own demo simply choosing the element from the wrapkit.
Note: We also suggest you if you are using scss file, then the best tool for the compilation is http://prepros.io download it.

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.

Check Live of banners

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.

Check Live of form-banners

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.css and 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.

Check slider1    Check slider2    Check slider3    Check slider4    Check slider5    Check slider6    Check slider7    Check slider8    Check slider9    Check slider10   

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.css and 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.css and 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.css and 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.css and 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.

Footers- how to use

We have created 5 different footers 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 [email protected] 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.

Check live preview of 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 Components

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

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.

Check live preview of Counter

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 Modals

Forms - 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

Grid - how to use

Checkout the grid system used in this UI Kit.

Check live preview of Grid

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.

60% Complete
                                        
                                            <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

Timeline - how to use

Checkout the timeline page.

Check live preview of Timeline

Tooltip & Popover - how to use

Checkout the Tooltip & Popover page.

Check live preview of Tooltip & Popover

Typed 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

Typography - how to use

Checkout the typography page.

Check live preview of Typography

Utility Classes - how to use

Checkout the Utility Classes.

Check live preview of Utility Classes

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
Address

71 Amsteroum Avenue Cronish Night, NY 35098

Phone

Reception : +205 123 4567
Office : +207 235 7890

Email

Office : [email protected]
Site : [email protected]

Social