### 1. Introduction

Material Pro Admin is a popular open source WebApp template for admin dashboards and control panels. Material Pro Admin is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Monter Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

We put a lot of love and effort to make Material Pro Admin a useful template for everyone and now It comes with 7 unique admin templates. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Material Pro Admin, you will be entitled to free download of all future updates for the same license.

Author: Wrappixel / Nirav Joshi
Contact: info@wrappixel.com / niravjoshi87@gmail.com
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 as it will help us to continue supporting our template and providing a free future updates.

### 1.2 Installation Guide

This is the simple static HTML template so no need any headech to install it.
Just simple steps to follow:
Main(demo folder) + assets (folder) = Enjoy your demo.

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 Material Proadmin comes it does not affect your code.

### 2. Template Structure

All template files have fixed structure consisting of `header`, `mega menu`, `top menu`, `user profile`, `sidebar menu`, `right sidebar`, `content` and `footer` as shown below:

### 3. Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

    <!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="../assets/images/favicon.png">
        <title>Material Pro Admin Template - Responsive web app kit dashboard</title>
        <!-- Bootstrap Core CSS -->
        <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../assets/plugins/prism/prism.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="../main/css/style.css" rel="stylesheet">
        <!-- You can change the theme colors from here -->
        <link href="../main/css/colors/blue.css" id="theme" 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>

### 4. Preloader (spinner)

This is for the loader when page load

        <!-- ============================================================== -->
        <!-- Preloader - style you can find in spinners.css -->
        <!-- ============================================================== -->
        <div class="preloader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
            </svg>
        </div>
        <!-- ============================================================== -->
        <!-- Preloader end -->
        <!-- ============================================================== -->

### 5. Logo

This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload

    <!-- ============================================================== -->
    <!-- Logo -->
    <!-- ============================================================== -->
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
            <!-- Logo icon -->
            <b>
                <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                <!-- Dark Logo icon -->
                <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                <!-- Light Logo icon -->
                <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
            </b>
            <!--End Logo icon -->
            <!-- Logo text --><span>
             <!-- dark Logo text -->
             <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
             <!-- Light Logo text -->
             <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
    </div>
    <!-- ============================================================== -->
    <!-- End Logo -->
    <!-- ============================================================== -->

### 6. Left Sidebar

We have created leftsidebar with the following code.

    <!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <aside class="left-sidebar">
        <!-- Sidebar scroll-->
        <div class="scroll-sidebar">
            <!-- Sidebar navigation-->
            <nav class="sidebar-nav">
                <ul id="sidebarnav">
                    <li class="nav-small-cap">DOCUMENTATION</li>
                    <li><a href="#Intro" aria-expanded="false"><i class="mdi mdi-file"></i><span class="hide-menu">Introduction</span></a></li>
                </ul>
            </nav>
            <!-- End Sidebar navigation -->
        </div>
        <!-- End Sidebar scroll-->
        <!-- Bottom points-->
        <div class="sidebar-footer">
            <!-- item--><a href="" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
            <!-- item--><a href="" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
            <!-- item--><a href="" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a> </div>
        <!-- End Bottom points-->
    </aside>
    <!-- ============================================================== -->
    <!-- End Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->

### 7. Page content, right sidebar and Footer

Below is the code for the page content wrapper, you can start your content here

            <!-- ============================================================== -->
            <!-- Page wrapper  -->
            <!-- ============================================================== -->
            <div class="page-wrapper">
                <!-- ============================================================== -->
                <!-- Container fluid  -->
                <!-- ============================================================== -->
                <div class="container-fluid">
                    <!-- ============================================================== -->
                    <!-- Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    <div class="row page-titles">
                        <div class="col-md-6 col-8 align-self-center">
                            <h3 class="text-themecolor m-b-0 m-t-0">Dashboard</h3>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                <li class="breadcrumb-item active">Dashboard</li>
                            </ol>
                        </div>
                        <div class="col-md-6 col-4 align-self-center">
                            <button class="right-side-toggle waves-effect waves-light btn-info btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
                            <button class="btn pull-right hidden-sm-down btn-success"><i class="mdi mdi-plus-circle"></i> Create</button>
                            <div class="dropdown pull-right m-r-10 hidden-sm-down">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    January 2019
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">February 2019</a>
                                    <a class="dropdown-item" href="#">March 2019</a>
                                    <a class="dropdown-item" href="#">April 2019</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- Start Page Content -->
                    <!-- ============================================================== -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    This is some text within a card block.
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End PAge Content -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- Right sidebar -->
                    <!-- ============================================================== -->
                    <!-- .right-sidebar -->
                    <div class="right-sidebar">
                        <div class="slimscrollright">
                            <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                            <div class="r-panel-body">
                                <ul id="themecolors" class="m-t-20">
                                    <li><b>With Light sidebar</b></li>
                                    <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
                                    <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
                                    <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
                                    <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
                                    <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
                                    <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
                                    <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                                    <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
                                    <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
                                    <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
                                    <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
                                    <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
                                    <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
                                </ul>
                                <ul class="m-t-20 chatonline">
                                    <li><b>Chat option</b></li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End Right sidebar -->
                    <!-- ============================================================== -->
                </div>
                <!-- ============================================================== -->
                <!-- End Container fluid  -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- footer -->
                <!-- ============================================================== -->
                <footer class="footer">
                    © 2019 Material Pro Admin by wrappixel.com
                </footer>
                <!-- ============================================================== -->
                <!-- End footer -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Page wrapper  -->
            <!-- ============================================================== -->

### 8. Settings in custom js

Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.

    // topbar stickey on scroll for fix header
        $(".fix-header .topbar").stick_in_parent({ });

    // ==============================================================
    // Theme options for sidebar toggler and logo text show hide
    // ==============================================================
    $(".sidebartoggler").on('click', function () {
        if ($("body").hasClass("mini-sidebar")) {
            $("body").trigger("resize");
            $(".scroll-sidebar, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
            $("body").removeClass("mini-sidebar");
            $('.navbar-brand span').show();
            $(".sidebartoggler i").addClass("ti-menu");
        }
        else {
            $("body").trigger("resize");
            $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
            $("body").addClass("mini-sidebar");
            $('.navbar-brand span').hide();
            $(".sidebartoggler i").removeClass("ti-menu");
        }
    });

    // ==============================================================
    // This is for Right sidebar options
    // ==============================================================
    $(".right-side-toggle").click(function () {
        $(".right-sidebar").slideDown(50);
        $(".right-sidebar").toggleClass("shw-rside");

    });

### 10. Font Family

We have used google fonts for the template you can change whatever font you wish

    // Variables
    @import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900';

    $bodyfont:'Rubik', sans-serif;
    $headingfont:'Rubik', sans-serif;

### 11. scss & css

Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it

    @import 'variable'; (All the predefine varialbes colors and etc)
    @import 'app'; ( All the Common scss contain here )
    @import 'pages'; (All pages scss contain here )
    @import 'sidebar'; ( Left sidebar scss contain here )
    @import '../scss/icons/font-awesome/css/font-awesome.min.css'; ( This is for the icons )
    @import '../scss/icons/simple-line-icons/css/simple-line-icons.css';( This is for the icons )
    @import '../scss/icons/weather-icons/css/weather-icons.min.css';( This is for the icons )
    @import '../scss/icons/linea-icons/linea.css';( This is for the icons )
    @import '../scss/icons/themify-icons/themify-icons.css'; ( This is for the icons )
    @import '../scss/icons/flag-icon-css/flag-icon.min.css';( This is for the icons )
    @import "../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css";( This is for the icons )
    @import 'widgets';( This is for the all widgets of the template )
    @import 'grid'; ( This is for the extra grid of xlg )
    @import 'responsive'; ( This is for the responsive scss )
    @import '../css/spinners.css'; ( This is for the Loader )
    @import '../css/animate.css';( This is for the Animation )

Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Material Proadmin comes it does not affect your code.

### 12. Horizontal menu / Navigation

We have already Created Horizontal Demo for the template

Check the live Preview

### 12. Starter kit page ( Create new page )

You can start your project with starter-page.html , in that page all the unnecessary script and html code is removed, so you can start with the new page.

Check the live Preview

### 13. Helper Classes

we make classes to help you in your developement process, and make it fast. checkout the below link for the helper classes

Check the live Preview

### 14. Folder Structure

we follow simple structure for the template

                                                HTML
                                                  ├──
                                                  │   └── Material Pro Admin HTML/
                                                  │       └── Css
                                                  │            └── All Css files
                                                  │       └── Js
                                                  │            └── All Js files
                                                  │       └── scss
                                                  │            └── All scss files
                                                  │       └── All Html Pages
                                                  │
                                                  │   └── Assets/
                                                  │       └── Plugins
                                                  │            └── All Required plugins files
                                                  │       └── Images
                                                  │             └── All Theme Images
                                                  └──

### 15. Color Variations

We have made Total 6 Color variation with light and dark sidebar

    <!-- You can change the theme colors, just put this css to head -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">

    <link href="css/colors/green.css" id="theme" rel="stylesheet">

    <link href="css/colors/red.css" id="theme" rel="stylesheet">

    <link href="css/colors/blue.css" id="theme" rel="stylesheet">

    <link href="css/colors/purple.css" id="theme" rel="stylesheet">

    <link href="css/colors/megna.css" id="theme" rel="stylesheet">

    <!-- For the dark sidebar -->
    <link href="css/colors/default-dark.css" id="theme" rel="stylesheet">

    <link href="css/colors/green-dark.css" id="theme" rel="stylesheet">

    <link href="css/colors/red-dark.css" id="theme" rel="stylesheet">

    <link href="css/colors/blue-dark.css" id="theme" rel="stylesheet">

    <link href="css/colors/purple-dark.css" id="theme" rel="stylesheet">

    <link href="css/colors/megna-dark.css" id="theme" rel="stylesheet">

### 16. Layout options

We have provided many layout options you can choose whatever you like

For Example

Fix header | Simply Put class `.fix-header` to body tag
Fix Sidebar | Simply Put class `.fix-sidebar` to body tag
Logo in Center | Simply Put class `.logo-center` to body tag

### 17. Content

#### Grid options

###### See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px
--- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 540px | 720px | 960px | 1140px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
# of columns | 12
Gutter width | 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any `.col-md-` class to an element will not only affect its styling on medium devices but also on large devices if a `.col-lg-` class is not present.

#### Example: Stacked-to-horizontal

###### Using a single set of `.col-md-*` grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

#### Example: Mobile and desktop

###### Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` `.col-md-*` to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

#### Example: Mobile, tablet, desktops

###### Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

#### Responsive column resets

###### With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

#### Offsetting columns

###### Move columns to the right using `.offset-md--*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

### 18. Card

Below is the basic card structure.

    <div class="card">
        <div class="card-header">
            Title
            <div class="card-actions">
                <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
            </div>
        </div>
        <div class="card-body collapse show">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
    </div>

### 19. Icons

Below is the table of icon fonts used in this template.

Icon Name | Example
--- | ---
Font-awesome | `<i class="fa fa-icon-name"></i>`
Material Icons | `<i class="mdi mdi-icon-name"></i>`
Linea Icons | `<div data-icon="a" class="linea-icon linea-basic"><div>`
Simple Line Icons | `<i class="icon-name_of_icon"></i>`
Themify Icons | `<i class="ti-icon-name"></i>`
Weather Icons | `<i class="wi wi-icon-name"></i>`
Flag Icons | `<i class="flag-icon flsg-icon-country-name"></i>`

### 20. Button

Below is the general buttons.

    <div class="button-group">
        <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
        <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
        <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
        <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
        <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
        <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
    </div>

### 21. Charts

Below is the table of pages which includes charts and where you can find the script related to it.

Page | Where to find it's JS
--- | ---
`index.html` (dashboard1) | `js/dashboard1.js`
`index2.html` (dashboard2) | `js/dashboard2.js`
`index3.html` (dashboard3) | `js/dashboard3.js`
`index4.html` (dashboard4) | `js/dashboard4.js`
`index5.html` (dashboard5) | `js/dashboard5.js`
`index6.html` (dashboard6) | `js/dashboard6.js`

### 22. Form

Below is the basic form structure.

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

### 23. Table

Below is the basic table structure.

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

### 23.1 Other Table Plugins & Documentation

- Datatables: Documentation
- Js grid Table: Documentation
- Responsive Table: Documentation
- Bootstrap-table: Documentation
- FooTable: Documentation

### 24. Js

We diffentiate scss file for the pages and widgets and compile it with style.css

Scss files

File | Description
--- | ---
`jquery.js`, `tether.js, bootstrap.js`, `jquery.slimscroll` | These files are used at main files of the theme. and nicescroll is for sidebarscroll
`custom.js` | This is a main function js file. it contain sidebar and other basic js
`sidebar.js` | This file contains sidebarnavigation js
`wave.js` | This is for wave effects on buttons and other elements

### 25. Plugins

##### Select Plugin

### jQuery Block-UI

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/blockUI/jquery.blockUI.js" type="text/javascript"></script>

### Bootstrap Datepicker

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js" type="text/javascript"></script>

### bootstrap-daterangepicker

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>

### bootstrap-rtl-master

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-rtl-master/dist/css/bootstrap-rtl.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-rtl-master/dist/js/bootstrap-rtl.min.js" type="text/javascript"></script>

### bootstrap-select

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-select/bootstrap-select.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>

### bootstrap-social

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-social/bootstrap-social.css" />

##### JavaScript Files

    No JS available

### bootstrap-table

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.ints.js" type="text/javascript"></script>

### bootstrap-tagsinput

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js" type="text/javascript"></script>

### bootstrap-touchspin

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>

### bootstrap-treeview

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview-init.js" type="text/javascript"></script>

### Calendar

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/calendar/dist/fullcalendar.css" />

##### JavaScript Files

    <script src="../assets/plugins/calendar/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/calendar/dist/fullcalendar.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/calendar/dist/jquery.fullcalendar.js" type="text/javascript"></script>

### Chart.js

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/Chart.js/chartjs.init.js" type="text/javascript"></script>
    <script src="../assets/plugins/Chart.js/Chart.min.js" type="text/javascript"></script>

### clockpicker

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>

### counterup

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>

### cropper

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/cropper/cropper.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/cropper/cropper.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/cropper/cropper-init.js" type="text/javascript"></script>

### css-chart

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/css-chart/css-chart.css" />

##### JavaScript Files

    No JS available

### custom-select

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/custom-select/custom-select.css" />

##### JavaScript Files

    <script src="../assets/plugins/custom-select/custom-select.min.js" type="text/javascript"></script>

### dropify

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/dropify/dist/css/dropify.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/dropify/dist/js/dropify.min.js" type="text/javascript"></script>

### dropzone master

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/dropzone-master/dist/dropzone.css" />

##### JavaScript Files

    <script src="../assets/plugins/dropzone-master/dist/dropzone.js" type="text/javascript"></script>

### fancybox

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/fancybox/ekko-lightbox.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/fancybox/ekko-lightbox.min.js" type="text/javascript"></script>

### flot

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/flot/excanvas.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.pie.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.resize.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.time.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.stack.js" type="text/javascript"></script>
    <script src="../assets/plugins/flot/jquery.flot.crosshair.js" type="text/javascript"></script>

### flot-tooltip

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>

### footable

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/footable/css/footable.core.css" />

##### JavaScript Files

    <script src="../assets/plugins/footable/js/footable.all.min.js" type="text/javascript"></script>

### gallery

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/gallery/css/animated-masonry-gallery.css" />

##### JavaScript Files

    <script src="../assets/plugins/gallery/js/animated-masonry-gallery.js" type="text/javascript"></script>
    <script src="../assets/plugins/gallery/js/jquery.isotope.min.js" type="text/javascript"></script>

### gmaps

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/gmaps/gmaps.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/gmaps/jquery.gmaps.js" type="text/javascript"></script>

### horizontal-timeline

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/horizontal-timeline/css/horizontal-timeline.css" />

##### JavaScript Files

    <script src="../assets/plugins/horizontal-timeline/js/horizontal-timeline.js" type="text/javascript"></script>

### html5-editor

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/html5-editor/bootstrap-wysihtml5.css" />

##### JavaScript Files

    <script src="../assets/plugins/html5-editor/wysihtml5-0.3.0.js" type="text/javascript"></script>
    <script src="../assets/plugins/html5-editor/bootstrap-wysihtml5.js" type="text/javascript"></script>

### ion-rangeslider

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.skinModern.css" />

##### JavaScript Files

    <script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider-init.js" type="text/javascript"></script>

### jquery-easy-pie-chart

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery.easy-pie-chart/easy-pie-chart.init.js" type="text/javascript"></script>

### jquery-asColorPicker

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-asColorPicker-master/css/asColorPicker.css" />

##### JavaScript Files

    <script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColor.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asGradient.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColorPicker.min.js" type="text/javascript"></script>

### jquery-sparkline

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery-sparkline/jquery.charts-sparkline.js" type="text/javascript"></script>

### jquery-wizard-master

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/css/wizard.css" />
    <link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/jquery-wizard-master/dist/jquery-wizard.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/bootstrap.min.js" type="text/javascript"></script>

### jsgrid

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid.min.css" />
    <link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid-theme.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/jsgrid/db.js" type="text/javascript"></script>
    <script src="../assets/plugins/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
    <script src="js/jsgrid-init.js" type="text/javascript"></script>

### knob chart

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/knob/jquery.knob.js" type="text/javascript"></script>

### magnific-popup

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/Magnific-Popup-master/dist/magnific-popup.css" />

##### JavaScript Files

    <script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup-init.js" type="text/javascript"></script>

### moment

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/moment/moment.js" type="text/javascript"></script>

### morrisjs

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/morrisjs/morris.css" />

##### JavaScript Files

    <script src="../assets/plugins/raphael/raphael-min.js" type="text/javascript"></script>
    <script src="../assets/plugins/morrisjs/morris.js" type="text/javascript"></script>
    <script src="js/morris-data.js" type="text/javascript"></script>

### multiselect

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/multiselect/css/multi-select.css" />

##### JavaScript Files

    <script src="../assets/plugins/multiselect/js/jquery.multi-select.js" type="text/javascript"></script>

### nestable

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/nestable/nestable.css" />

##### JavaScript Files

    <script src="../assets/plugins/nestable/jquery.nestable.js" type="text/javascript"></script>

### owl-carousel

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/owl.carousel/owl.carousel.min.css" />
    <link rel="stylesheet" type="text/css" href="../assets/plugins/owl.carousel/owl.theme.default.css" />

##### JavaScript Files

    <script src="../assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/owl.carousel/owl.custom.js" type="text/javascript"></script>

### peity charts

##### CSS Files

    No CSS Available

##### JavaScript Files

    <script src="../assets/plugins/peity/jquery.peity.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/peity/jquery.peity.init.js" type="text/javascript"></script>

### skycons

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/skycons/skycons.js" type="text/javascript"></script>

### summernote

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/summernote/dist/summernote.css" />

##### JavaScript Files

    <script src="../assets/plugins/summernote/dist/summernote.min.js" type="text/javascript"></script>

### sweetalert

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/sweetalert/sweetalert.css" />

##### JavaScript Files

    <script src="../assets/plugins/sweetalert/sweetalert.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/sweetalert/jquery.sweet-alert.custom.js" type="text/javascript"></script>

### switchery

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/switchery/dist/switchery.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/switchery/dist/switchery.min.js" type="text/javascript"></script>

### tablesaw

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/tablesaw-master/dist/tablesaw.css" />

##### JavaScript Files

    <script src="../assets/plugins/tablesaw-master/dist/tablesaw.js" type="text/javascript"></script>
    <script src="../assets/plugins/tablesaw-master/dist/tablesaw-init.js" type="text/javascript"></script>

### timepicker

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/timepicker/bootstrap-timepicker.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>

### tiny-editable

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/tiny-editable/mindmup-editabletable.js" type="text/javascript"></script>
    <script src="../assets/plugins/tiny-editable/numeric-input-example.js" type="text/javascript"></script>

### tinymce

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/tinymce/tinymce.min.js" type="text/javascript"></script>

### toast

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/toast-master/css/jquery.toast.css" />

##### JavaScript Files

    <script src="../assets/plugins/toast-master/js/jquery.toast.js" type="text/javascript"></script>
    <script src="js/toastr.js" type="text/javascript"></script>

### typeahead

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/typeahead.js-master/dist/typehead-min.css" />

##### JavaScript Files

    <script src="../assets/plugins/typeahead.js-master/dist/typeahead.bundle.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/typeahead.js-master/dist/typeahead-init.js" type="text/javascript"></script>

### vectormap

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" />

##### JavaScript Files

    <script src="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jquery-jvectormap-in-mill.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jquery-jvectormap-us-aea-en.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jquery-jvectormap-uk-mill-en.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jquery-jvectormap-au-mill.js" type="text/javascript"></script>
    <script src="../assets/plugins/vectormap/jvectormap.custom.js" type="text/javascript"></script>

### waypoints

##### CSS Files

    No CSS available

##### JavaScript Files

    <script src="../assets/plugins/waypoints/lib/jquery.waypoints.js" type="text/javascript"></script>

### x-editable

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />

##### JavaScript Files

    <script src="../assets/plugins/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js" type="text/javascript"></script>

### datatables

##### CSS Files

    <link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/jquery.dataTables.min.css" />

##### JavaScript Files

    <script src="../assets/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>

### 26. Credits to the third party plugins

- Bootstrap
- Jquery
- Font-Awesome
- Sweet-Alert
- Nestable
- Nicescroll
- Full Calendar
- Form Validator
- Bootstrap-timepicker
- Bootstrap-datepicker
- Bootstrap-date-range-picker
- Bootstrap-material-datetimepicker
- Date-paginator
- Bootstrap Colorpicker
- Multi-select
- Select2
- Dropify
- Dropzone
- Wysihtml5
- Datatables
- Morris
- Chartjs
- C3 charts
- Sparkline
- Gmaps
- Vector Maps
- Pexels (images)
- Image Cropper
- Flot-charts
- Custombox
- Owl carousel
- Themify-icons
- Weather icons
- Switchery
- Bootstrap select
- Bootstrap switch
- Bootstrap Touchspin
- Wysiwig Editor
- Bootstrap tables
- Chartist chart
- Jquery Block UI
- Fancybox
- Footable
- Gallery
- Gridstack
- Holderjs
- Html5 Editor
- Icheck Control
- Ion range slider
- Jquery Steps
- Magnific Popup
- Prism
- Tablesaw
- X-editable
- Waypoints
- Typehead js

### 27. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to info@wrappixel.com or niravjoshi87@gmail.com

How to generate a support ticket:

- Go to the wrappixel.com.
- From the topbar menu, click on SUPPORT and login/signup popup will open. Remember, you have to login to your account on wrappixel.com website.
- After successful login, you will be redirected to a page where you can open a support ticket for your query/issue.

### 28. Free PSD File

Mail us on info@wrappixel.com for get the psd file. we will send you all the psd for free.

Thank you