Introduction


Ample admin is a popular open source WebApp template for admin dashboards and control panels. Ample 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. Ample 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 Ample admin a useful template for everyone and now It comes with 20 unique demos. 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 Ample admin, you will be entitled to free download of all future updates for the same license.


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.
Support does include:
  • 1) Answering your questions or problems regarding the template.
  • 2) Giving solution to the Bugs reported.

Support does not include:
  • 1) Custmaization Work
  • 2) Any Installation Work
  • 3) Support for any Third Party Plugins / Software
  • 4) Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)
  • 5) Solve bug in your implemented template

Installation


This is the simple static HTML template so no need any headech to install it. just double click on any html (html/ltr/) file and you can access it.


Just simple steps to follow if you are using npm for package manager:


1) Install Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.

2) NPM Packages: You can do this by running npm install from the root of your project to install all the necessary dependencies.

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 Ample admin comes it does not affect your code.
For compiling scss & js:

We used gulp for compiling scss and js file so if you are also using scss then try our gulp task manager to compile scss

If you never work with gulp then you need to get starterd from here: https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md

1. Install gulp globally:

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

$ npm install --global gulp-cli

2. Install gulp in your project devDependencies:

$ npm install --save-dev gulp

3. We already created gulpfile.js at the root of the project: if you want any other task you can add that 4. Run gulp:

$ gulp



How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder, after that you need to run this command gulp copy to include dependencies in assets/libs folder.

Layout options


With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

You can find app.init.js file from here:

                                    
                                        dist/js/app.init.js
                                    
                                
                                    
                                        Theme: false, // this can be true or false ( true means dark and false means light ),
                                        Layout: 'vertical',
                                        LogoBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6 
                                        NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarType: 'overlay', // You can change it full / mini-sidebar / iconbar / overlay
                                        SidebarColor: 'skin5', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
                                    
                                
How to apply Dark Theme ?

For dark theme, you can change Theme:true in place of Theme:false.

                                    
                                        Theme: true, // this can be true or false ( true means dark and false means light ),
                                    
                                
How to apply Minisidebar(Collapse) Sidebar ?

For Collapse sidebar, you can change SidebarType: 'mini-sidebar' in place of SidebarType: 'full'.

                                    
                                        SidebarType: 'mini-sidebar', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Full Sidebar ?

For Full sidebar, you can change SidebarType: 'full'.

                                    
                                        SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Icon Sidebar ?

For Icon sidebar, you can change SidebarType: 'iconbar' in place of SidebarType: 'full'.

                                    
                                        SidebarType: 'iconbar', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Overlay Sidebar ?

For Overlay sidebar, you can change SidebarType: 'overlay' in place of SidebarType: 'full'.

                                    
                                        SidebarType: 'overlay', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Fixed Sidebar ?

For Fixed sidebar, you can change SidebarPosition: true, in place of SidebarPosition: false,.

                                    
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Fixed Header ?

For Fixed Header, you can change HeaderPosition: true, in place of HeaderPosition: false.

                                    
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Boxed Layout ?

For Boxed Layout, you can change BoxedLayout: true in place of BoxedLayout: false.

                                    
                                        BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid ) 
                                    
                                

Color Variations

With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

                                    
                                        Theme: false, // this can be true or false ( true means dark and false means light ),
                                        Layout: 'vertical',
                                        LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6 
                                        NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
                                        SidebarColor: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid ) 
                                    
                                
How to apply Dark Theme ?

For dark theme, you can change Theme:true in place of Theme:false.

                                    
                                        Theme: true, // this can be true or false ( true means dark and false means light ),
                                    
                                
How to Change Sidebar Color?
To change a sidebar color, choose any of the following options.

To apply Cyan color of sidebar

                                    
                                        SidebarColor: 'skin1' //To apply Cyan color of sidebar
                                    
                                

To apply Blue color of sidebar

                                    
                                        SidebarColor: 'skin2' //To apply Blue color of sidebar
                                    
                                

To apply Red color of sidebar

                                    
                                        SidebarColor: 'skin3' //To apply Red color of sidebar
                                    
                                

To apply Gray color of sidebar

                                    
                                        SidebarColor: 'skin4' //To apply Gray color of sidebar
                                    
                                

To apply Black color of sidebar

                                    
                                        SidebarColor: 'skin5' //To apply Black color of sidebar
                                    
                                

To apply White color of sidebar

                                    
                                        SidebarColor: 'skin6' //To apply White color of sidebar
                                    
                                
How to Change Navbar Color?
To change a navbar color, choose any of the following options.

To apply Cyan color of navbar

                                    
                                        NavbarBg: 'skin1' //To apply Cyan color of navbar
                                    
                                

To apply Blue color of navbar

                                    
                                        NavbarBg: 'skin2' //To apply Blue color of navbar
                                    
                                

To apply Red color of navbar

                                    
                                        NavbarBg: 'skin3' //To apply Red color of navbar
                                    
                                

To apply Gray color of navbar

                                    
                                        NavbarBg: 'skin4' //To apply Gray color of navbar
                                    
                                

To apply Black color of navbar

                                    
                                        NavbarBg: 'skin5' //To apply Black color of navbar
                                    
                                

To apply White color of navbar

                                    
                                        NavbarBg: 'skin6' //To apply White color of navbar
                                    
                                
How to Change Logo Background Color?
To change a logo background color, choose any of the following options.

To apply Cyan background-color of logo

                                    
                                        LogoBg: 'skin1' //To apply Cyan background-color of logo
                                    
                                

To apply Blue background-color of logo

                                    
                                        LogoBg: 'skin2' //To apply Blue background-color of logo
                                    
                                

To apply Red background-color of logo

                                    
                                        LogoBg: 'skin3' //To apply Red background-color of logo
                                    
                                

To apply Gray background-color of logo

                                    
                                        LogoBg: 'skin4' //To apply Gray background-color of logo
                                    
                                

To apply Black background-color of logo

                                    
                                        LogoBg: 'skin5' //To apply Black background-color of logo
                                    
                                

To apply White background-color of logo

                                    
                                        LogoBg: 'skin6' //To apply White background-color of logo
                                    
                                

Folder Structure


we follow simple structure for the template

                                    
                                            Ample admin
                                              |
                                              |
                                              |
                                              |── html
                                              |     └── ampleadmin/
                                              |         └── All HTML Files
                                              |
                                              |     └── ampleadmin-dark/
                                              |         └── All HTML Files
                                              |
                                              |     └── ampleadmin-horizontal-nav/
                                              |         └── All HTML Files
                                              |    
                                              |     └── ampleadmin-material/
                                              |         └── All HTML Files
                                              |
                                              |     └── ampleadmin-minimal/
                                              |         └── All HTML Files  
                                              | 
                                              |     └── ampleadmin-rtl/
                                              |         └── All HTML Files   
                                              |
                                              |      └── ampleadmin-sidebar/
                                              |         └── All HTML Files      
                                              |
                                              |
                                              |── assets
                                              |     └── extra-libs/
                                              |          └── plugins which is not available on npm
                                              |
                                              |     └── images/ 
                                              |         └── All Theme images
                                              |
                                              |     └── libs/
                                              |         └── All Required plugins files
                                              |
                                              |── dist
                                              |     └── css/
                                              |          └── All css files
                                              |
                                              |     └── js/ 
                                              |         └── All Js files  
                                              |
                                              |── src
                                              |     └── scss/
                                              |          └── All scss files
                                              |
                                              |── package.json
                                              |    
                                              |
                                              |── gulpfile.js
                                              |     
                                              |     
                                              |
                                              └
                
                                    
                                

Page Structure


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>Ample admin Template - The Ultimate Multipurpose admin template</title>
                                            <!-- Custom CSS -->
                                            <link href="dist/css/style.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>
                                    
                                

Preloader (spinner)


This is for the loader when page load

                                    
                                        <!-- ============================================================== -->
                                        <!-- Preloader - style you can find in spinners.css -->
                                        <!-- ============================================================== -->
                                        <div class="preloader">
                                            <div class="lds-ripple">
                                                <div class="lds-pos"></div>
                                                <div class="lds-pos"></div>
                                            </div>
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- Preloader end -->
                                        <!-- ============================================================== -->              
                                    
                                

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

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="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark profile-dd" href="javascript:void(0)" aria-expanded="false">
                                                                    <img src="../../assets/images/users/1.jpg" class="rounded-circle ml-2" width="30">
                                                                    <span class="hide-menu">Steve Jection </span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="ti-user"></i>
                                                                            <span class="hide-menu"> My Profile </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="ti-wallet"></i>
                                                                            <span class="hide-menu"> My Balance </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="ti-email"></i>
                                                                            <span class="hide-menu"> Inbox </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="ti-settings"></i>
                                                                            <span class="hide-menu"> Account Setting </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="fas fa-power-off"></i>
                                                                            <span class="hide-menu"> Logout </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-av-timer"></i>
                                                                    <span class="hide-menu">Dashboard</span> 
                                                                    <span class="badge badge-inverse badge-pill ml-auto mr-3 font-medium px-2 py-1">6</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="index.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 1 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="index2.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 2 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="index3.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 3 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="index4.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 4 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="index5.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 5 </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="index6.html" class="sidebar-link">
                                                                            <i class="mdi mdi-adjust"></i>
                                                                            <span class="hide-menu"> Dashboard 6 </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-cart-outline"></i>
                                                                    <span class="hide-menu">Ecommerce</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products.html" class="sidebar-link">
                                                                            <i class="mdi mdi-cards-variant"></i>
                                                                            <span class="hide-menu">Products</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products-cart.html" class="sidebar-link">
                                                                            <i class="mdi mdi-cart"></i>
                                                                            <span class="hide-menu">Products Cart</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products-edit.html" class="sidebar-link">
                                                                            <i class="mdi mdi-cart-plus"></i>
                                                                            <span class="hide-menu">Products Edit</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products-detail.html" class="sidebar-link">
                                                                            <i class="mdi mdi-camera-burst"></i>
                                                                            <span class="hide-menu">Product Details</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products-orders.html" class="sidebar-link">
                                                                            <i class="mdi mdi-chart-pie"></i>
                                                                            <span class="hide-menu">Product Orders</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="eco-products-checkout.html" class="sidebar-link">
                                                                            <i class="mdi mdi-clipboard-check"></i>
                                                                            <span class="hide-menu">Products Checkout</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-format-color-fill"></i>
                                                                    <span class="hide-menu">Ui Elements </span>
                                                                    <span class="badge badge-info badge-pill ml-auto mr-3 font-medium px-2 py-1">12</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-buttons.html" class="sidebar-link">
                                                                            <i class="mdi mdi-toggle-switch"></i>
                                                                            <span class="hide-menu"> Buttons</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-modals.html" class="sidebar-link">
                                                                            <i class="mdi mdi-tablet"></i>
                                                                            <span class="hide-menu"> Modals</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-tab.html" class="sidebar-link">
                                                                            <i class="mdi mdi-sort-variant"></i>
                                                                            <span class="hide-menu"> Tab</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-tooltip-popover.html" class="sidebar-link">
                                                                            <i class="mdi mdi-image-filter-vintage"></i>
                                                                            <span class="hide-menu"> Tooltip & Popover</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-notification.html" class="sidebar-link">
                                                                            <i class="mdi mdi-message-bulleted"></i>
                                                                            <span class="hide-menu"> Notification</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-progressbar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-poll"></i>
                                                                            <span class="hide-menu"> Progressbar</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-typography.html" class="sidebar-link">
                                                                            <i class="mdi mdi-format-line-spacing"></i>
                                                                            <span class="hide-menu"> Typography</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-bootstrap.html" class="sidebar-link">
                                                                            <i class="mdi mdi-bootstrap"></i>
                                                                            <span class="hide-menu"> Bootstrap Ui</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-breadcrumb.html" class="sidebar-link">
                                                                            <i class="mdi mdi-equal"></i>
                                                                            <span class="hide-menu"> Breadcrumb</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-list-media.html" class="sidebar-link">
                                                                            <i class="mdi mdi-file-video"></i>
                                                                            <span class="hide-menu"> List Media</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-grid.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-module"></i>
                                                                            <span class="hide-menu"> Grid</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-carousel.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-carousel"></i>
                                                                            <span class="hide-menu"> Carousel</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-content-copy"></i>
                                                                    <span class="hide-menu">Sample Pages</span>
                                                                    <span class="badge badge-warning text-white badge-pill ml-auto mr-3 font-medium px-2 py-1">25</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="starter-kit.html" class="sidebar-link">
                                                                            <i class="mdi mdi-crop-free"></i>
                                                                            <span class="hide-menu">Starter Kit</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-email-open-outline"></i>
                                                                            <span class="hide-menu">Email Templates</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="email-templete-alert.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-message-alert"></i>
                                                                                    <span class="hide-menu"> Alert </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="email-templete-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-message-bulleted"></i>
                                                                                    <span class="hide-menu"> Basic</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="email-templete-billing.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-message-draw"></i>
                                                                                    <span class="hide-menu"> Billing</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="email-templete-password-reset.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-message-bulleted-off"></i>
                                                                                    <span class="hide-menu"> Password-Reset</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-account-circle"></i>
                                                                            <span class="hide-menu">Authentication</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-login1.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-key"></i>
                                                                                    <span class="hide-menu"> Login </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-login2.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-key"></i>
                                                                                    <span class="hide-menu"> Login 2 </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-register1.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-plus"></i>
                                                                                    <span class="hide-menu"> Register</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-register2.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-plus"></i>
                                                                                    <span class="hide-menu"> Register 2</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-lockscreen.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-off"></i>
                                                                                    <span class="hide-menu"> Lockscreen</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="authentication-recover-password.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-account-convert"></i>
                                                                                    <span class="hide-menu"> Recover password</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-alert-box"></i>
                                                                            <span class="hide-menu">Error Pages</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="error-400.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-alert-outline"></i>
                                                                                    <span class="hide-menu"> Error 400 </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="error-403.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-alert-outline"></i>
                                                                                    <span class="hide-menu"> Error 403</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="error-404.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-alert-outline"></i>
                                                                                    <span class="hide-menu"> Error 404</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="error-500.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-alert-outline"></i>
                                                                                    <span class="hide-menu"> Error 500</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="error-503.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-alert-outline"></i>
                                                                                    <span class="hide-menu"> Error 503</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-animation.html" class="sidebar-link">
                                                                            <i class="mdi mdi-debug-step-over"></i>
                                                                            <span class="hide-menu">Animation</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-search-result.html" class="sidebar-link">
                                                                            <i class="mdi mdi-search-web"></i>
                                                                            <span class="hide-menu">Search Result</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-gallery.html" class="sidebar-link">
                                                                            <i class="mdi mdi-camera-iris"></i>
                                                                            <span class="hide-menu">Gallery</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-treeview.html" class="sidebar-link">
                                                                            <i class="mdi mdi-file-tree"></i>
                                                                            <span class="hide-menu">Treeview</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-block-ui.html" class="sidebar-link">
                                                                            <i class="mdi mdi-codepen"></i>
                                                                            <span class="hide-menu">Block UI</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-session-timeout.html" class="sidebar-link">
                                                                            <i class="mdi mdi-timer-off"></i>
                                                                            <span class="hide-menu">Session Timeout</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-session-idle-timeout.html" class="sidebar-link">
                                                                            <i class="mdi mdi-timer-sand-empty"></i>
                                                                            <span class="hide-menu">Session Idle Timeout</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-utility-classes.html" class="sidebar-link">
                                                                            <i class="mdi mdi-tune"></i>
                                                                            <span class="hide-menu">Helper Classes</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-maintenance.html" class="sidebar-link">
                                                                            <i class="mdi mdi-camera-iris"></i>
                                                                            <span class="hide-menu">Maintenance Page</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-apps"></i>
                                                                    <span class="hide-menu">Apps</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="app-chats.html" class="sidebar-link">
                                                                            <i class="mdi mdi-comment-processing-outline"></i>
                                                                            <span class="hide-menu">Chat Message</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-inbox-arrow-down"></i>
                                                                            <span class="hide-menu">Inbox</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="inbox-email.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-email"></i>
                                                                                    <span class="hide-menu"> Email </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="inbox-email-detail.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-email-alert"></i>
                                                                                    <span class="hide-menu"> Email Detail </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="inbox-email-compose.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-email-secure"></i>
                                                                                    <span class="hide-menu"> Email Compose </span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="ti-user"></i>
                                                                            <span class="hide-menu">Contacts</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="contact-list.html" class="sidebar-link">
                                                                                    <i class="icon-people"></i>
                                                                                    <span class="hide-menu"> Contact List </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="contact-grid.html" class="sidebar-link">
                                                                                    <i class="icon-user-follow"></i>
                                                                                    <span class="hide-menu"> Contacts Grid </span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-bookmark-plus-outline"></i>
                                                                            <span class="hide-menu">Tickets</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="ticket-list.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-book-multiple"></i>
                                                                                    <span class="hide-menu"> Ticket List </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="ticket-detail.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-book-plus"></i>
                                                                                    <span class="hide-menu"> Ticket Detail </span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="app-taskboard.html" class="sidebar-link">
                                                                            <i class="mdi mdi-bulletin-board"></i>
                                                                            <span class="hide-menu"> Taskboard </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <div class="devider"></div>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-tune-vertical"></i>
                                                                    <span class="hide-menu">Sidebar Type </span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="sidebar-type-minisidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-quilt"></i>
                                                                            <span class="hide-menu"> Minisidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="sidebar-type-iconsidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-parallel"></i>
                                                                            <span class="hide-menu"> Icon Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="sidebar-type-overlaysidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-day"></i>
                                                                            <span class="hide-menu"> Overlay Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="sidebar-type-fullsidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-array"></i>
                                                                            <span class="hide-menu"> Full Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-content-copy"></i>
                                                                    <span class="hide-menu">Page Layouts </span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="layout-inner-fixed-left-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-format-align-left"></i>
                                                                            <span class="hide-menu"> Inner Fixed Left Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="layout-inner-fixed-right-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-format-align-right"></i>
                                                                            <span class="hide-menu"> Inner Fixed Right Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="layout-inner-left-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-format-float-left"></i>
                                                                            <span class="hide-menu"> Inner Left Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="layout-inner-right-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-format-float-right"></i>
                                                                            <span class="hide-menu"> Inner Right Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="page-layout-fixed-header.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-quilt"></i>
                                                                            <span class="hide-menu"> Fixed Header </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="page-layout-fixed-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-parallel"></i>
                                                                            <span class="hide-menu"> Fixed Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="page-layout-fixed-header-sidebar.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-column"></i>
                                                                            <span class="hide-menu"> Fixed Header & Sidebar </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="page-layout-boxed-layout.html" class="sidebar-link">
                                                                            <i class="mdi mdi-view-carousel"></i>
                                                                            <span class="hide-menu"> Box Layout </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <div class="devider"></div>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-clipboard-text"></i>
                                                                    <span class="hide-menu">Forms</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-collage"></i>
                                                                            <span class="hide-menu">Form Elements</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-inputs.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-priority-low"></i>
                                                                                    <span class="hide-menu"> Forms Input</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-input-groups.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-rounded-corner"></i>
                                                                                    <span class="hide-menu"> Input Groups</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-input-grid.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-select-all"></i>
                                                                                    <span class="hide-menu"> Input Grid</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-checkbox-radio.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-shape-plus"></i>
                                                                                    <span class="hide-menu"> Checkboxes & Radios</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-bootstrap-touchspin.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-switch"></i>
                                                                                    <span class="hide-menu"> Bootstrap Touchspin</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-bootstrap-switch.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-toggle-switch-off"></i>
                                                                                    <span class="hide-menu"> Bootstrap Switch</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-select2.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-relative-scale"></i>
                                                                                    <span class="hide-menu"> Select2</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-dual-listbox.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-tab-unselected"></i>
                                                                                    <span class="hide-menu"> Dual Listbox</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-xditable.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-loop"></i>
                                                                                    <span class="hide-menu"> X-editable</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-receipt"></i>
                                                                            <span class="hide-menu">Form Layouts</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-vector-difference-ba"></i>
                                                                                    <span class="hide-menu"> Basic Forms</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-horizontal.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-file-document-box"></i>
                                                                                    <span class="hide-menu"> Form Horizontal</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-actions.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-code-greater-than"></i>
                                                                                    <span class="hide-menu"> Form Actions</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-row-separator.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-code-equal"></i>
                                                                                    <span class="hide-menu"> Row Separator</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-bordered.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-flip-to-front"></i>
                                                                                    <span class="hide-menu"> Form Bordered</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-striped-row.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-content-duplicate"></i>
                                                                                    <span class="hide-menu"> Striped Rows</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-detail.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-cards-outline"></i>
                                                                                    <span class="hide-menu"> Form Detail</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-material.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-content-duplicate"></i>
                                                                                    <span class="hide-menu"> Form Material</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-float-input.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-logout"></i>
                                                                                    <span class="hide-menu"> Form Float Input</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-code-equal"></i>
                                                                            <span class="hide-menu">Form Addons</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-paginator.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-export"></i>
                                                                                    <span class="hide-menu"> Paginator</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-img-cropper.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-crop"></i>
                                                                                    <span class="hide-menu"> Image Cropper</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-dropzone.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-crosshairs-gps"></i>
                                                                                    <span class="hide-menu"> Dropzone</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-mask.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-box-shadow"></i>
                                                                                    <span class="hide-menu"> Form Mask</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-typeahead.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-cards-variant"></i>
                                                                                    <span class="hide-menu"> Form Typehead</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-alert-box"></i>
                                                                            <span class="hide-menu">Form Validation</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-bootstrap-validation.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-credit-card-scan"></i>
                                                                                    <span class="hide-menu"> Bootstrap Validation</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-custom-validation.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-credit-card-plus"></i>
                                                                                    <span class="hide-menu"> Custom Validation</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-pencil-box-outline"></i>
                                                                            <span class="hide-menu">Form Pickers</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-picker-colorpicker.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-calendar-plus"></i>
                                                                                    <span class="hide-menu"> Form Colorpicker</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-picker-datetimepicker.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-calendar-clock"></i>
                                                                                    <span class="hide-menu"> Form Datetimepicker</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-picker-bootstrap-rangepicker.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-calendar-range"></i>
                                                                                    <span class="hide-menu"> Form Bootstrap Rangepicker</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-picker-bootstrap-datepicker.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-calendar-check"></i>
                                                                                    <span class="hide-menu"> Form Bootstrap Datepicker</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-picker-material-datepicker.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-calendar-text"></i>
                                                                                    <span class="hide-menu"> Form Material Datepicker</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-dns"></i>
                                                                            <span class="hide-menu">Form Editor</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="form-editor-ckeditor.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-drawing"></i>
                                                                                    <span class="hide-menu">Ck Editor</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-editor-quill.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-drupal"></i>
                                                                                    <span class="hide-menu">Quill Editor</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-editor-summernote.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-brightness-6"></i>
                                                                                    <span class="hide-menu">Summernote Editor</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="form-editor-tinymce.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-bowling"></i>
                                                                                    <span class="hide-menu">Tinymce Edtor</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="form-wizard.html" class="sidebar-link">
                                                                            <i class="mdi mdi-cube-send"></i>
                                                                            <span class="hide-menu">Form Wizard</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="form-repeater.html" class="sidebar-link">
                                                                            <i class="mdi mdi-creation"></i>
                                                                            <span class="hide-menu">Form Repeater</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-table"></i>
                                                                    <span class="hide-menu">Tables</span>
                                                                    <span class="badge badge-danger text-white badge-pill ml-auto mr-3 font-medium px-2 py-1">11</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-border-none"></i>
                                                                            <span class="hide-menu">Bootstrap Tables</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="table-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-all"></i>
                                                                                    <span class="hide-menu">Basic Table </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="table-dark-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-left"></i>
                                                                                    <span class="hide-menu">Dark Basic Table </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="table-sizing.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-outside"></i>
                                                                                    <span class="hide-menu">Sizing Table </span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="table-layout-coloured.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-bottom"></i>
                                                                                    <span class="hide-menu">Coloured Table Layout</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-border-inside"></i>
                                                                            <span class="hide-menu">Datatables</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="table-datatable-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-vertical"></i>
                                                                                    <span class="hide-menu"> Basic Initialisation</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="table-datatable-api.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-blur-linear"></i>
                                                                                    <span class="hide-menu"> API</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="table-datatable-advanced.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-border-style"></i>
                                                                                    <span class="hide-menu"> Advanced Initialisation</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="table-bootstrap.html" class="sidebar-link">
                                                                            <i class="mdi mdi-border-horizontal"></i>
                                                                            <span class="hide-menu">Table Bootstrap</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="table-jsgrid.html" class="sidebar-link">
                                                                            <i class="mdi mdi-border-top"></i>
                                                                            <span class="hide-menu">Table Jsgrid</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="table-responsive.html" class="sidebar-link">
                                                                            <i class="mdi mdi-border-style"></i>
                                                                            <span class="hide-menu">Table Responsive</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="table-footable.html" class="sidebar-link">
                                                                            <i class="mdi mdi-tab-unselected"></i>
                                                                            <span class="hide-menu">Table Footable</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-chart-bar"></i>
                                                                    <span class="hide-menu">Charts</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="chart-morris.html" class="sidebar-link">
                                                                            <i class="mdi mdi-image-filter-tilt-shift"></i>
                                                                            <span class="hide-menu">Morris Chart</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="chart-chart-js.html" class="sidebar-link">
                                                                            <i class="mdi mdi-svg"></i>
                                                                            <span class="hide-menu">Chartjs</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="chart-sparkline.html" class="sidebar-link">
                                                                            <i class="mdi mdi-chart-histogram"></i>
                                                                            <span class="hide-menu">Sparkline Chart</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="chart-chartist.html" class="sidebar-link">
                                                                            <i class="mdi mdi-blur"></i>
                                                                            <span class="hide-menu">Chartist Chart</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-chemical-weapon"></i>
                                                                            <span class="hide-menu">C3 Charts</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-c3-axis.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-arrange-bring-to-front"></i>
                                                                                    <span class="hide-menu">Axis Chart</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-c3-bar.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-arrange-send-to-back"></i>
                                                                                    <span class="hide-menu">Bar Chart</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-c3-data.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-backup-restore"></i>
                                                                                    <span class="hide-menu">Data Chart</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-c3-line.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-backburger"></i>
                                                                                    <span class="hide-menu">Line Chart</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-chart-areaspline"></i>
                                                                            <span class="hide-menu">Echarts</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse first-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-echart-basic.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-chart-line"></i>
                                                                                    <span class="hide-menu">Basic Charts</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-echart-bar.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-chart-scatterplot-hexbin"></i>
                                                                                    <span class="hide-menu">Bar Chart</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="chart-echart-pie-doughnut.html" class="sidebar-link">
                                                                                    <i class="mdi mdi-chart-pie"></i>
                                                                                    <span class="hide-menu">Pie & Doughnut Chart</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <div class="devider"></div>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-credit-card-multiple"></i>
                                                                    <span class="hide-menu">Cards</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-cards.html" class="sidebar-link">
                                                                            <i class="mdi mdi-layers"></i>
                                                                            <span class="hide-menu"> Basic Cards</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-card-customs.html" class="sidebar-link">
                                                                            <i class="mdi mdi-credit-card-scan"></i>
                                                                            <span class="hide-menu">Custom Cards</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-card-weather.html" class="sidebar-link">
                                                                            <i class="mdi mdi-weather-fog"></i>
                                                                            <span class="hide-menu">Weather Cards</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-card-draggable.html" class="sidebar-link">
                                                                            <i class="mdi mdi-bandcamp"></i>
                                                                            <span class="hide-menu">Draggable Cards</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-credit-card-multiple"></i>
                                                                    <span class="hide-menu">Components</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="component-sweetalert.html" class="sidebar-link">
                                                                            <i class="mdi mdi-layers"></i>
                                                                            <span class="hide-menu"> Sweet Alert</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="component-nestable.html" class="sidebar-link">
                                                                            <i class="mdi mdi-credit-card-scan"></i>
                                                                            <span class="hide-menu">Nestable</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="component-noui-slider.html" class="sidebar-link">
                                                                            <i class="mdi mdi-weather-fog"></i>
                                                                            <span class="hide-menu">Noui slider</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="component-rating.html" class="sidebar-link">
                                                                            <i class="mdi mdi-bandcamp"></i>
                                                                            <span class="hide-menu">Rating</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="component-toastr.html" class="sidebar-link">
                                                                            <i class="mdi mdi-poll"></i>
                                                                            <span class="hide-menu">Toastr</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <div class="devider"></div>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-settings"></i>
                                                                    <span class="hide-menu">Widgets </span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse  first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="widgets-apps.html" class="sidebar-link">
                                                                            <i class="mdi mdi-comment-processing-outline"></i>
                                                                            <span class="hide-menu"> Apps Widgets </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="widgets-data.html" class="sidebar-link">
                                                                            <i class="mdi mdi-calendar"></i>
                                                                            <span class="hide-menu"> Data Widgets </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="widgets-charts.html" class="sidebar-link">
                                                                            <i class="mdi mdi-bulletin-board"></i>
                                                                            <span class="hide-menu"> Charts Widgets</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-face"></i>
                                                                    <span class="hide-menu">Icons</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-material.html" class="sidebar-link">
                                                                            <i class="mdi mdi-emoticon"></i>
                                                                            <span class="hide-menu"> Material Icons </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-fontawesome.html" class="sidebar-link">
                                                                            <i class="mdi mdi-emoticon-cool"></i>
                                                                            <span class="hide-menu"> Fontawesome Icons</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-themify.html" class="sidebar-link">
                                                                            <i class="mdi mdi-chart-bubble"></i>
                                                                            <span class="hide-menu"> Themify Icons</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-weather.html" class="sidebar-link">
                                                                            <i class="mdi mdi-weather-cloudy"></i>
                                                                            <span class="hide-menu"> Weather Icons</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-simple-lineicon.html" class="sidebar-link">
                                                                            <i class="mdi mdi mdi-image-broken-variant"></i>
                                                                            <span class="hide-menu"> Simple Line icons</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="icon-flag.html" class="sidebar-link">
                                                                            <i class="mdi mdi-flag-triangle"></i>
                                                                            <span class="hide-menu"> Flag Icons</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="map-google.html" aria-expanded="false">
                                                                    <i class="mdi mdi-google-maps"></i>
                                                                    <span class="hide-menu">Google Map</span>
                                                                </a>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="map-vector.html" aria-expanded="false">
                                                                    <i class="mdi mdi-map-marker-radius"></i>
                                                                    <span class="hide-menu">Vector Map</span>
                                                                </a>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-account-multiple"></i>
                                                                    <span class="hide-menu">Users</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-user-card.html" class="sidebar-link">
                                                                            <i class="mdi mdi-account-box"></i>
                                                                            <span class="hide-menu"> User Card </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-profile.html" class="sidebar-link">
                                                                            <i class="mdi mdi-account-network"></i>
                                                                            <span class="hide-menu"> User Profile</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="ui-user-contacts.html" class="sidebar-link">
                                                                            <i class="mdi mdi-account-star-variant"></i>
                                                                            <span class="hide-menu"> User Contact</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-ungroup"></i>
                                                                    <span class="hide-menu">Invoice</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-invoice.html" class="sidebar-link">
                                                                            <i class="mdi mdi-vector-triangle"></i>
                                                                            <span class="hide-menu"> Invoice Layout </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="pages-invoice-list.html" class="sidebar-link">
                                                                            <i class="mdi mdi-vector-rectangle"></i>
                                                                            <span class="hide-menu"> Invoice List</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-apple-safari"></i>
                                                                    <span class="hide-menu">Timeline</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="timeline-center.html" class="sidebar-link">
                                                                            <i class="mdi mdi-clock-fast"></i>
                                                                            <span class="hide-menu"> Center Timeline </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="timeline-horizontal.html" class="sidebar-link">
                                                                            <i class="mdi mdi-clock-end"></i>
                                                                            <span class="hide-menu"> Horizontal Timeline</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="timeline-left.html" class="sidebar-link">
                                                                            <i class="mdi mdi-clock-in"></i>
                                                                            <span class="hide-menu"> Left Timeline</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="timeline-right.html" class="sidebar-link">
                                                                            <i class="mdi mdi-clock-start"></i>
                                                                            <span class="hide-menu"> Right Timeline</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="app-calendar.html" aria-expanded="false">
                                                                    <i class="mdi mdi-calendar-check"></i>
                                                                    <span class="hide-menu">Calendar</span>
                                                                </a>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
                                                                    <i class="mdi mdi-notification-clear-all"></i>
                                                                    <span class="hide-menu">Multi level dd</span>
                                                                </a>
                                                                <ul aria-expanded="false" class="collapse first-level">
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="mdi mdi-octagram"></i>
                                                                            <span class="hide-menu"> item 1.1</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="mdi mdi-octagram"></i>
                                                                            <span class="hide-menu"> item 1.2</span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                                            <i class="mdi mdi-playlist-plus"></i>
                                                                            <span class="hide-menu">Menu 1.3</span>
                                                                        </a>
                                                                        <ul aria-expanded="false" class="collapse second-level">
                                                                            <li class="sidebar-item">
                                                                                <a href="javascript:void(0)" class="sidebar-link">
                                                                                    <i class="mdi mdi-octagram"></i>
                                                                                    <span class="hide-menu"> item 1.3.1</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="javascript:void(0)" class="sidebar-link">
                                                                                    <i class="mdi mdi-octagram"></i>
                                                                                    <span class="hide-menu"> item 1.3.2</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="javascript:void(0)" class="sidebar-link">
                                                                                    <i class="mdi mdi-octagram"></i>
                                                                                    <span class="hide-menu"> item 1.3.3</span>
                                                                                </a>
                                                                            </li>
                                                                            <li class="sidebar-item">
                                                                                <a href="javascript:void(0)" class="sidebar-link">
                                                                                    <i class="mdi mdi-octagram"></i>
                                                                                    <span class="hide-menu"> item 1.3.4</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li class="sidebar-item">
                                                                        <a href="javascript:void(0)" class="sidebar-link">
                                                                            <i class="mdi mdi-playlist-check"></i>
                                                                            <span class="hide-menu"> item 1.4</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <div class="devider"></div>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="../../docs/documentation.html" aria-expanded="false">
                                                                    <i class="mdi mdi-adjust text-danger"></i>
                                                                    <span class="hide-menu">Documentation</span>
                                                                </a>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="authentication-login1.html" aria-expanded="false">
                                                                    <i class="mdi mdi-adjust text-info"></i>
                                                                    <span class="hide-menu">Log Out</span>
                                                                </a>
                                                            </li>
                                                            <li class="sidebar-item">
                                                                <a class="sidebar-link waves-effect waves-dark sidebar-link" href="pages-faq.html" aria-expanded="false">
                                                                    <i class="mdi mdi-adjust text-success"></i>
                                                                    <span class="hide-menu">FAQs</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </nav>
                                                    <!-- End Sidebar navigation -->
                                                </div>
                                                <!-- End Sidebar scroll-->
                                                </aside>
                                                <!-- ============================================================== -->
                                                <!-- End Left Sidebar - style you can find in sidebar.scss  -->
                                                <!-- ============================================================== -->
                                            
                                        

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">
                                            <!-- ============================================================== -->
                                            <!-- Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <div class="page-breadcrumb bg-light">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
                                                        <h5 class="font-medium text-uppercase mb-0">Starter Page</h5>
                                                    </div>
                                                    <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                                                        <button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample Admin</button>
                                                        <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                                                            <ol class="breadcrumb mb-0 justify-content-end p-0 bg-light">
                                                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                                                <li class="breadcrumb-item active" aria-current="page">Starter Page</li>
                                                            </ol>
                                                        </nav>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- Container fluid  -->
                                            <!-- ============================================================== -->
                                            <div class="page-content container-fluid">
                                                <!-- ============================================================== -->
                                                <!-- 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 -->
                                                <!-- ============================================================== -->
                                                <!-- End Right sidebar -->
                                                <!-- ============================================================== -->
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Container fluid  -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- footer -->
                                            <!-- ============================================================== -->
                                            <footer class="footer">
                                                © 2019 Eliteadmin by themedesigner.in
                                            </footer>
                                            <!-- ============================================================== -->
                                            <!-- End footer -->
                                            <!-- ============================================================== -->
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- End Page wrapper  -->
                                        <!-- ============================================================== -->
                                        <!-- ============================================================== -->
                                        <!-- End Wrapper -->
                                        <!-- ============================================================== -->
                                        <!-- ============================================================== -->
                                        <!-- customizer Panel -->
                                        <!-- ============================================================== -->
                                        <aside class="customizer">
                                            <a href="javascript:void(0)" class="service-panel-toggle"><i class="fa fa-spin fa-cog"></i></a>
                                            <div class="customizer-body">
                                                <ul class="nav customizer-tab" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true"><i class="mdi mdi-wrench font-20"></i></a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false"><i class="mdi mdi-message-reply font-20"></i></a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false"><i class="mdi mdi-star-circle font-20"></i></a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content" id="pills-tabContent">
                                                    <!-- Tab 1 -->
                                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                                        <div class="p-15 border-bottom">
                                                            <!-- Sidebar -->
                                                            <h5 class="font-medium m-b-10 m-t-10">Layout Settings</h5>
                                                            <div class="custom-control custom-checkbox m-t-10">
                                                                <input type="checkbox" class="custom-control-input" name="theme-view" id="theme-view">
                                                                <label class="custom-control-label" for="theme-view">Dark Theme</label>
                                                            </div>
                                                            <div class="custom-control custom-checkbox m-t-10">
                                                                <input type="checkbox" class="custom-control-input sidebartoggler" name="collapssidebar" id="collapssidebar">
                                                                <label class="custom-control-label" for="collapssidebar">Collapse Sidebar</label>
                                                            </div>
                                                            <div class="custom-control custom-checkbox m-t-10">
                                                                <input type="checkbox" class="custom-control-input" name="sidebar-position" id="sidebar-position">
                                                                <label class="custom-control-label" for="sidebar-position">Fixed Sidebar</label>
                                                            </div>
                                                            <div class="custom-control custom-checkbox m-t-10">
                                                                <input type="checkbox" class="custom-control-input" name="header-position" id="header-position">
                                                                <label class="custom-control-label" for="header-position">Fixed Header</label>
                                                            </div>
                                                            <div class="custom-control custom-checkbox m-t-10">
                                                                <input type="checkbox" class="custom-control-input" name="boxed-layout" id="boxed-layout">
                                                                <label class="custom-control-label" for="boxed-layout">Boxed Layout</label>
                                                            </div>
                                                        </div>
                                                        <div class="p-15 border-bottom">
                                                            <!-- Logo BG -->
                                                            <h5 class="font-medium m-b-10 m-t-10">Logo Backgrounds</h5>
                                                            <ul class="theme-color">
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin1"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin2"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin3"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin4"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin5"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin6"></a></li>
                                                            </ul>
                                                            <!-- Logo BG -->
                                                        </div>
                                                        <div class="p-15 border-bottom">
                                                            <!-- Navbar BG -->
                                                            <h5 class="font-medium m-b-10 m-t-10">Navbar Backgrounds</h5>
                                                            <ul class="theme-color">
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin1"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin2"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin3"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin4"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin5"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin6"></a></li>
                                                            </ul>
                                                            <!-- Navbar BG -->
                                                        </div>
                                                        <div class="p-15 border-bottom">
                                                            <!-- Logo BG -->
                                                            <h5 class="font-medium m-b-10 m-t-10">Sidebar Backgrounds</h5>
                                                            <ul class="theme-color">
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin1"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin2"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin3"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin4"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin5"></a></li>
                                                                <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin6"></a></li>
                                                            </ul>
                                                            <!-- Logo BG -->
                                                        </div>
                                                    </div>
                                                    <!-- End Tab 1 -->
                                                    <!-- Tab 2 -->
                                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">2</div>
                                                    <!-- End Tab 2 -->
                                                    <!-- Tab 3 -->
                                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">3</div>
                                                    <!-- End Tab 3 -->
                                                </div>
                                            </div>
                                        </aside>             
                                    
                                

Settings in custom js


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

                                    
                                        // this is for close icon when navigation open in mobile view
                                        $(".nav-toggler").on('click', function() {
                                            $("#main-wrapper").toggleClass("show-sidebar");
                                            $(".nav-toggler i").toggleClass("ti-menu");
                                        });
                                        $(".nav-lock").on('click', function() {
                                            $("body").toggleClass("lock-nav");
                                            $(".nav-lock i").toggleClass("mdi-toggle-switch-off");
                                            $("body, .page-wrapper").trigger("resize");
                                        });
                                        $(".search-box a, .search-box .app-search .srh-btn").on('click', function() {
                                            $(".app-search").toggle(200);
                                            $(".app-search input").focus();
                                        });

                                        // ============================================================== 
                                        // Right sidebar options
                                        // ==============================================================
                                        $(function() {
                                            $(".service-panel-toggle").on('click', function() {
                                               $(".customizer").toggleClass('show-service-panel');

                                            });
                                            $('.page-wrapper').on('click', function() {
                                                $(".customizer").removeClass('show-service-panel');
                                            });
                                        });    
                                    
                                

How to change Font Family


You can change fonts globally as per your requirements, for that need to change in variable.scss file. you will find these file from here:

                                    
                                        src/scss/variable.scss
                                    
                                

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

                                    
                                        // Variables
                                        @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);
                                        $font-family-sans-serif: 'Rubik', sans-serif !default;
                                    
                                

Plugins (Find Js and CSS Path)


You can find plugins from here as per page requirements

Select Plugin
jQuery Block-UI
CSS Files
                                        
                                            No CSS available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/blockUI/jquery.blockUI.js" type="text/javascript"></script>
                                        
                                    
Bootstrap Colorpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap datepaginator
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap datepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap duallistbox
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-duallistbox/dist/bootstrap-duallistbox.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap material datetimepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js" type="text/javascript"></script>
                                        
                                    
Bootstrap switch
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap touchspin
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
                                        
                                    
chart-js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chart-js/dist/Chart.min.js" type="text/javascript"></script>
                                        
                                    
chartist
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/chartist/dist/chartist.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chartist/dist/chartist.min.js" type="text/javascript"></script>
                                        
                                    
chartist-plugin-tooltips
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js" type="text/javascript"></script>
                                        
                                    
ckeditor
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css" />
                                         <link rel="stylesheet" type="text/css" href="../../assets/libs/ckeditor/samples/css/samples.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/ckeditor/ckeditor.js" type="text/javascript"></script>
                                         <script src=" ../../assets/libs/ckeditor/samples/js/sample.js" type="text/javascript"></script>
                                        
                                    
clockpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.css" />

                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.js" type="text/javascript"></script>

                                        <script src="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>
                                        
                                    
cropper
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/cropper/dist/cropper.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/cropper/dist/cropper.min.js" type="text/javascript"></script>
                                        
                                    
datatables
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/datatables/media/css/jquery.dataTables.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
                                        
                                    
daterangepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/daterangepicker/daterangepicker.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/daterangepicker/daterangepicker.js" type="text/javascript"></script>
                                        
                                    
dragula
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/dragula/dist/dragula.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/dragula/dist/dragula.min.js" type="text/javascript"></script>
                                        
                                    
dropzone
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/dropzone/dist/dropzone.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/dropzone/dist/dropzone.js" type="text/javascript"></script>
                                        
                                    
echarts
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/echarts/dist/echarts.min.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/echarts/dist/echarts.simple.min.js" type="text/javascript"></script>
                                        
                                    
flot
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/flot/jquery.flot.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/flot/jquery.flot.pie.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/flot/jquery.flot.resize.js" type="text/javascript"></script>
                                        
                                    
footable
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/footable/css/footable.core.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
                                        
                                    
footable
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/footable/css/footable.core.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
                                        
                                    
fullcalendar
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js" type="text/javascript"></script>
                                        
                                    
gaugeJS
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/gaugeJS/dist/gauge.min.js" type="text/javascript"></script>
                                        
                                    
gmaps
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/gmaps/dist/gmaps.min.js" type="text/javascript"></script>
                                        
                                    
inputmask
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js" type="text/javascript"></script>
                                        
                                    
jquery
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
                                        
                                    
jquery.flot.tooltip
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>
                                        
                                    
jquery.repeater
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery.repeater/js/jquery.repeater.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asColor
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-asColor/js/jquery-asColor.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asColorPicker
CSS Files
                                        
                                        <script src="../../assets/libs/jquery-asColorPicker/dist/css/asColorPicker.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asGradient
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-asGradient/dist/jquery-asGradient.min.js" type="text/javascript"></script>
                                        
                                    
jquery-sessiontimeout
CSS Files
                                        
                                       css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-sessiontimeout/jquery.sessionTimeout.min.js" type="text/javascript"></script>
                                        
                                    
jquery-steps
CSS Files
                                        
                                        <script src="../../assets/libs/jquery-steps/jquery.steps.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-steps/build/jquery.steps.min.js" type="text/javascript"></script>
                                        
                                    
jquery-validation
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
                                        
                                    
jsgrid
CSS Files
                                        
                                        <script src="../../assets/libs/jsgrid/dist/jsgrid.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
                                        
                                    
jvectormap
CSS Files
                                        
                                        <script src="../../assets/libs/jvectormap/jquery-jvectormap.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jvectormap/jquery-jvectormap.min.js" type="text/javascript"></script>
                                        
                                    
magnific-popup
CSS Files
                                        
                                        <script src="../../assets/libs/magnific-popup/dist/magnific-popup.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
                                        
                                    
masonry-layout
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/masonry-layout/dist/masonry.pkgd.min.js" type="text/javascript"></script>
                                        
                                    
moment
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/moment/moment.js" type="text/javascript"></script>
                                        
                                    
morris.js
CSS Files
                                        
                                        <script src="../../assets/libs/morris.js/morris.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/morris.js/morris.min.js" type="text/javascript"></script>
                                        
                                    
nestable
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/nestable/jquery.nestable.js" type="text/javascript"></script>
                                        
                                    
perfect-scrollbar
CSS Files
                                        
                                        <script src="../../assets/libs/perfect-scrollbar/css/perfect-scrollbar.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/perfect-scrollbar/js/perfect-scrollbar.min.js" type="text/javascript"></script>
                                        
                                    
pickadate
CSS Files
                                        
                                        <script src="../../assets/libs/pickadate/lib/themes/default.css" type="text/javascript"></script>
                                        <script src="../../assets/libs/pickadate/lib/themes/default.date.css" type="text/javascript"></script>
                                        <script src="../../assets/libs/pickadate/lib/themes/default.time.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/pickadate/lib/picker.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/pickadate/lib/picker.date.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/pickadate/lib/picker.time.js" type="text/javascript"></script>

                                        
                                    
popper.js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/popper.js/dist/popper.min.js" type="text/javascript"></script>
                                        
                                    
prism
CSS Files
                                        
                                        <script src="../../assets/extra-libs/prism/prism.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/extra-libs/prism/prism.js" type="text/javascript"></script>
                                        
                                    
taskboard
CSS Files
                                        
                                        <script src="../../assets/extra-libs/taskboard/css/lobilist.css" type="text/javascript"></script>
                                        <script src="../../assets/extra-libs/taskboard/css/jquery-ui.min.css" type="text/javascript"></script>
                                        <script src="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/extra-libs/taskboard/js/lobilist.js" type="text/javascript"></script>
                                        <script src="../../assets/extra-libs/taskboard/js/lobibox.min.js" type="text/javascript"></script>
                                        <script src="../../assets/extra-libs/taskboard/js/task-init.js" type="text/javascript"></script>
                                        
                                    
treeview
CSS Files
                                        
                                        <script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.init.js" type="text/javascript"></script>
                                        <script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
                                        
                                    
quill
CSS Files
                                        
                                        <script src="../../assets/libs/quill/dist/quill.snow.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/quill/dist/quill.min.js" type="text/javascript"></script>
                                        
                                    
raphael
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/raphael/raphael.min.js" type="text/javascript"></script>
                                        
                                    
select2
CSS Files
                                        
                                        <script src="../../assets/libs/select2/dist/css/select2.min.cssquot; type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/select2/dist/js/select2.min.js" type="text/javascript"></script>
                                        
                                    
summernote
CSS Files
                                        
                                        <script src="../../assets/libs/summernote/dist/summernote.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/summernote/dist/summernote.min.js" type="text/javascript"></script>
                                        
                                    
sweetalert2
CSS Files
                                        
                                        <script src="../../assets/libs/sweetalert2/dist/sweetalert2.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/sweetalert2/sweet-alert.init.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
                                        
                                    
tablesaw
CSS Files
                                        
                                        <script src="../../assets/libs/tablesaw/dist/tablesaw.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/tablesaw/dist/tablesaw.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/tablesaw/dist/tablesaw-init.js" type="text/javascript"></script>
                                        
                                    
tinymce
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/tinymce/tinymce.min.js" type="text/javascript"></script>
                                        <script src="../../assets/libs/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
                                        
                                    
typeahead.js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/typeahead.js/dist/typeahead.jquery.min.js" type="text/javascript"></script>
                                        
                                    

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

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 Where to find it's CSS
chart-morris.html ../../assets/libs/morris.js/morris.min.js ../../assets/libs/morris.js/morris.css
chart-chart-js.html ../../assets/libs/Chart.js/dist/Chart.min.js No CSS Available
chart-sparkline.html ../../assets/extra-libs/sparkline/sparkline.js No CSS Available
chart-chartist.html ../../assets/libs/chartist/dist/chartist.min.js ../../assets/libs/chartist/dist/chartist.min.css
chart-knob.html ../../assets/extra-libs/knob/jquery.knob.min.js No CSS Available
c3-chart-axis.html ../../assets/extra-libs/c3/c3.min.js ../../assets/extra-libs/c3/c3.min.css
c3-chart-bar.html ../../assets/extra-libs/c3/c3.min.js ../../assets/extra-libs/c3/c3.min.css
c3-chart-line.html ../../assets/extra-libs/c3/c3.min.js ../../assets/extra-libs/c3/c3.min.css
c3-chart-data.html ../../assets/extra-libs/c3/c3.min.js ../../assets/extra-libs/c3/c3.min.css
chart-echart-basic.html ../../assets/libs/echarts/dist/echarts-en.min.js No CSS Available
chart-echart-bar.html ../../assets/libs/echarts/dist/echarts-en.min.js No CSS Available
chart-echart-pie-doughnut.html ../../assets/libs/echarts/dist/echarts-en.min.js No CSS Available

Js Files


File Description
custom.js, custom.min.js This is a main function js file. it contain sidebar and other basic js
sidebarmenu.js This file contains sidebarnavigation js
app.js This is for setting plugin for the theme customizer.
app.init.js You can modify the settings though this.
app.init.dark.js You can modify the settings of Dark demo.
app.init.horizontal-fullwidth.js You can modify the settings of Horizontal demo.
app.init.material.js You can modify the settings of Material demo.
app.init.minimal.js You can modify the settings of Minimal demo.
app.init.mini-sidebar.js You can modify the settings of Mini Sidebar demo.
app-style-switcher.js It contains the customizer functions apply to the theme by clicking on customizer panel.
waves.js This is for wave effects on buttons and other elements
perfect-scrollbar.jquery.min.js This is for scroll.
dashboard1.js to dashboard6.js This is for all dashboards setting.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Default Alerts
                                                
                                                    <div class="card">
                                                        <div class="card-body bg-light">
                                                            <div class="alert alert-primary alert-dismissible fade show" role="alert">
                                                                A simple primary alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-secondary alert-dismissible fade show" role="alert">
                                                                A simple secondary alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                                                A simple success alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                A simple danger alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                                A simple warning alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-info alert-dismissible fade show" role="alert">
                                                                A simple info alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-light alert-dismissible fade show" role="alert">
                                                                A simple light alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="alert alert-dark alert-dismissible fade show" role="alert">
                                                                A simple dark alert—check it out!
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

Buttons


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>
                                    
                                

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Default Card
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
                                                
                                                    <div class="card">
                                                        <div class="card-header">
                                                            Featured
                                                        </div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Special title treatment</h5>
                                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                            <a href="#" class="btn btn-primary">Go somewhere</a>
                                                        </div>
                                                        <div class="card-footer text-muted">
                                                            2 days ago
                                                        </div>
                                                    </div>
                                                
                                            
Card with Images
Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
                                                
                                                    <div class="card">
                                                        <img class="card-img-top" src="../assets/images/background/user-info.jpg" alt="Card image cap">
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <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>
                                                
                                            
Card with Color Background
Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

                                                
                                                    <div class="card text-white bg-info">
                                                        <div class="card-header">Header</div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Info card title</h5>
                                                            <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>
                                                        </div>
                                                    </div>
                                                
                                            

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.

Form Elements

Default Input Types

HTML5 provides some basic input types which are include here (i.e text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color)

A block of help text that breaks onto a new line and may extend beyond one line.
                                                
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <form>
                                                                <div class="form-group mb-3">
                                                                    <label for="simpleinput">Text</label>
                                                                    <input type="text" id="simpleinput" class="form-control">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-email">Email</label>
                                                                    <input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-password">Password</label>
                                                                    <input type="password" id="example-password" class="form-control" value="password">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-palaceholder">Placeholder</label>
                                                                    <input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-textarea">Text area</label>
                                                                    <textarea class="form-control" id="example-textarea" rows="5"></textarea>
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-readonly">Readonly</label>
                                                                    <input type="text" id="example-readonly" class="form-control" readonly="" value="Readonly value">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-disable">Disabled</label>
                                                                    <input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-static">Static control</label>
                                                                    <input type="text" readonly class="form-control-plaintext" id="example-static" value="[email protected]">
                                                                </div>

                                                                <div class="form-group mb-0">
                                                                    <label for="example-helping">Helping text</label>
                                                                    <input type="text" id="example-helping" class="form-control" placeholder="Helping text">
                                                                    <span class="help-block">
                                                                        <small>A block of help text that breaks onto a new line and may
                                                                            extend beyond one line.</small>
                                                                    </span>
                                                                </div>

                                                            </form>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <form class="p-lg-1">
                                                                <div class="form-group mb-3">
                                                                    <label for="example-select">Input Select</label>
                                                                    <select class="form-control" id="example-select">
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                        <option>3</option>
                                                                        <option>4</option>
                                                                        <option>5</option>
                                                                    </select>
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-multiselect">Multiple Select</label>
                                                                    <select id="example-multiselect" multiple class="form-control">
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                        <option>3</option>
                                                                        <option>4</option>
                                                                        <option>5</option>
                                                                    </select>
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-fileinput">Default file input</label>
                                                                    <input type="file" id="example-fileinput" class="form-control-file">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-date">Date</label>
                                                                    <input class="form-control" id="example-date" type="date" name="date">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-month">Month</label>
                                                                    <input class="form-control" id="example-month" type="month" name="month">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-time">Time</label>
                                                                    <input class="form-control" id="example-time" type="time" name="time">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-week">Week</label>
                                                                    <input class="form-control" id="example-week" type="week" name="week">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-number">Number</label>
                                                                    <input class="form-control" id="example-number" type="number" name="number">
                                                                </div>

                                                                <div class="form-group mb-3">
                                                                    <label for="example-color">Color</label>
                                                                    <input class="form-control" id="example-color" type="color" name="color" value="#727cf5">
                                                                </div>

                                                                <div class="form-group mb-0">
                                                                    <label for="example-range">Range</label>
                                                                    <input class="form-control" id="example-range" type="range" name="range" min="0" max="100">
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                
                                            

Modals

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Default Modal
                                                
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title font-normal" id="exampleModalLabel">Modal title</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">×</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <h6>About Bootstrap</h6>
                                                                    <div class="p-t-25">
                                                                        <p>Bootstrap was developed by Mark Otto and Jacob Thornton at
                                                                            Twitter, and released as an open source product in August
                                                                            2011 on GitHub.</p>
                                                                        <p>Bootstrap is a free front-end framework for faster and easier
                                                                            web development Bootstrap includes HTML and CSS based
                                                                            design templates for typography, forms, buttons, tables,
                                                                            navigation, modals, image carousels and many other, as
                                                                            well as optional JavaScript plugins Bootstrap also gives
                                                                            you the ability to easily create responsive designs</p>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                                    <button type="button" class="btn btn-primary">Save changes</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Modal with Form
                                                
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="formmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header text-center">
                                                                    <!-- ============================================================== -->
                                                                    <!-- Logo -->
                                                                    <!-- ============================================================== -->
                                                                    <a class="navbar-brand m-auto" href="documentation.html">
                                                                        <!-- Logo icon -->
                                                                        <b class="logo-icon">
                                                                            <img src="../assets/images/logos/logo-icon.png" alt="homepage" class="dark-logo" />
                                                                        </b>
                                                                        <!--End Logo icon -->
                                                                        <!-- Logo text -->
                                                                        <span class="logo-text">
                                                                            <!-- dark Logo text -->
                                                                            <img src="../assets/images/logos/logo-text.png" alt="homepage" class="dark-logo" />
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label for="exampleInputEmail1">Email address</label>
                                                                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                                                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                                                        </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">
                                                                            <div class="custom-control custom-checkbox mr-sm-2">
                                                                                <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                                                                                <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
                                                                            </div>
                                                                        </div>
                                                                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Notification in Modal
                                                
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="nofication-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content ">
                                                                <div class="modal-body">
                                                                    <div class="text-center">
                                                                        <h6 class="text-success font-medium mb-0">You successfully send the message.</h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

Tabs

With Tabs you can surfing easily between more than one pages or view

Default Tab

Home Clean Tab ever

you can use it with the small code

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.

Profile Clean Tab ever

you can use it with the small code

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.

Messages Clean Tab ever

you can use it with the small code

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.

                                                
                                                    <!-- 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 d-lg-none d-block"></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 d-lg-none d-block"></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 d-lg-none d-block"></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="card-body bg-white">
                                                                <h3 class="font-medium">Home Clean Tab ever</h3>
                                                                <h4 class="font-normal">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" id="profile" role="tabpanel">
                                                            <div class="card-body bg-white">
                                                                <h3 class="font-medium">Profile Clean Tab ever</h3>
                                                                <h4 class="font-normal">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" id="messages" role="tabpanel">
                                                            <div class="card-body bg-white">
                                                                <h3 class="font-medium">Messages Clean Tab ever</h3>
                                                                <h4 class="font-normal">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>
                                                
                                            
Default Vertical Tab

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

                                                
                                                    <div class="row">
                                                        <div class="col-lg-4 col-xl-3">
                                                            <!-- Nav tabs -->
                                                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                                                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home"
                                                                    aria-selected="true">Home</a>
                                                                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                                                                    aria-selected="false">Profile</a>
                                                                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                                                                    aria-selected="false">Messages</a>
                                                                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                                                                    aria-selected="false">Settings</a>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-8 col-xl-9">
                                                            <div class="tab-content" id="v-pills-tabContent">
                                                                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                                                                    <p> Raw denim you probably haven't heard of them jean shorts
                                                                        Austin. Nesciunt tofu stumptown aliqua, retro synth
                                                                        master cleanse. Mustache cliche tempor, williamsburg
                                                                        carles vegan helvetica.</p>
                                                                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                                                                    Mustache cliche tempor, williamsburg carles vegan helvetica.
                                                                </div>
                                                                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                                                    <p> Probably haven't heard of them jean shorts Austin. Nesciunt
                                                                        tofu stumptown aliqua, retro synth master cleanse.
                                                                        Mustache cliche tempor, williamsburg carles vegan
                                                                        helvetica. </p>
                                                                    <p> Probably haven't heard of them jean shorts Austin. Nesciunt
                                                                        tofu stumptown aliqua, retro synth master cleanse.
                                                                        Mustache cliche tempor, williamsburg carles vegan
                                                                        helvetica. </p>
                                                                </div>
                                                                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                                                                    <p> Raw denim you probably haven't heard of them jean shorts
                                                                        Austin. Nesciunt tofu stumptown aliqua, retro synth
                                                                        master cleanse. Mustache cliche tempor, williamsburg
                                                                        carles vegan helvetica.</p>
                                                                    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                                                                    Mustache cliche tempor, williamsburg carles vegan helvetica.
                                                                </div>
                                                                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                                                                    <p> Probably haven't heard of them jean shorts Austin. Nesciunt
                                                                        tofu stumptown aliqua, retro synth master cleanse.
                                                                        Mustache cliche tempor, williamsburg carles vegan
                                                                        helvetica. </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Nav pills Tab
                                                
                                                    <ul class="nav nav-pills justify-content-end">
                                                        <li class=" nav-item">
                                                            <a href="#navpills2-1" class="nav-link active" data-toggle="tab" aria-expanded="false">Tab One</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a href="#navpills2-2" class="nav-link" data-toggle="tab" aria-expanded="false">Tab Two</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a href="#navpills2-3" class="nav-link" data-toggle="tab" aria-expanded="true">Tab Three</a>
                                                        </li>
                                                    </ul>
                                                    <div class="tab-content">
                                                        <div id="navpills2-1" class="tab-pane active">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <img src="../assets/images/big/img2.jpg" class="img-fluid thumbnail m-r-15"> </div>
                                                                <div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts
                                                                    Austin. Nesciunt tofu stumptown aliqua, retro synth master
                                                                    cleanse. Mustache cliche tempor, williamsburg carles
                                                                    vegan helvetica.
                                                                    <p>
                                                                        <br/> Reprehenderit butcher retro keffiyeh dreamcatcher
                                                                        synth. Cosby sweater eu banh mi, qui irure terry
                                                                        richardson ex squid.</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="navpills2-2" class="tab-pane">
                                                            <div class="row">
                                                                <div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts
                                                                    Austin. Nesciunt tofu stumptown aliqua, retro synth master
                                                                    cleanse. Mustache cliche tempor, williamsburg carles
                                                                    vegan helvetica.
                                                                    <p>
                                                                        <br/> Reprehenderit butcher retro keffiyeh dreamcatcher
                                                                        synth. Cosby sweater eu banh mi, qui irure terry
                                                                        richardson ex squid.</p>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <img src="../assets/images/big/img3.jpg" class="img-fluid thumbnail mr25"> </div>
                                                            </div>
                                                        </div>
                                                        <div id="navpills2-3" class="tab-pane">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <img src="../assets/images/big/img1.jpg" class="img-fluid thumbnail mr25"> </div>
                                                                <div class="col-md-8"> Raw denim you probably haven't heard of them jean shorts
                                                                    Austin. Nesciunt tofu stumptown aliqua, retro synth master
                                                                    cleanse. Mustache cliche tempor, williamsburg carles
                                                                    vegan helvetica.
                                                                    <p>
                                                                        <br/> Reprehenderit butcher retro keffiyeh dreamcatcher
                                                                        synth. Cosby sweater eu banh mi, qui irure terry
                                                                        richardson ex squid.</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

Basic Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers

Default Alerts
Status Title ID Created by Date Save your Password?
Completed Elegant Theme Side Menu Open OnClick 276377 Eric Pratt 2019/05/01
Closed AdminX Theme Side Menu Open OnClick 1234251 Nirav Joshi 2019/05/11
Opened Admin-Pro Theme Side Menu Open OnClick 1020345 Vishal Bhatt 2019/04/01
In Pending Elegant Theme Side Menu Open OnClick 7810203 Eric Pratt 2019/01/01
Closed AdminX Theme Side Menu Open OnClick 2103450 Nirav Joshi 2019/05/01
Completed Admin-Pro Theme Side Menu Open OnClick 2140530 Vishal Bhatt 2019/07/01
                                                
                                                    <div class="table-responsive">
                                                        <table class="table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Status</th>
                                                                    <th>Title</th>
                                                                    <th>ID</th>
                                                                    <th>Created by</th>
                                                                    <th>Date</th>
                                                                    <th>Save your Password?</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-info">Completed</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">Elegant Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">276377</a>
                                                                    </td>
                                                                    <td>Eric Pratt</td>
                                                                    <td>2019/05/01</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes1">
                                                                            <label class="custom-control-label" for="yes1">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-danger">Closed</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">AdminX Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">1234251</a>
                                                                    </td>
                                                                    <td>Nirav Joshi</td>
                                                                    <td>2019/05/11</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes2">
                                                                            <label class="custom-control-label" for="yes2">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-success">Opened</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">Admin-Pro Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">1020345</a>
                                                                    </td>
                                                                    <td>Vishal Bhatt</td>
                                                                    <td>2019/04/01</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes3">
                                                                            <label class="custom-control-label" for="yes3">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-warning">In Pending</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">Elegant Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">7810203</a>
                                                                    </td>
                                                                    <td>Eric Pratt</td>
                                                                    <td>2019/01/01</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes4">
                                                                            <label class="custom-control-label" for="yes4">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-danger">Closed</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">AdminX Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">2103450</a>
                                                                    </td>
                                                                    <td>Nirav Joshi</td>
                                                                    <td>2019/05/01</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes5">
                                                                            <label class="custom-control-label" for="yes5">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <span class="label label-info">Completed</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">Admin-Pro Theme Side Menu Open OnClick</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="#" class="font-medium link">2140530</a>
                                                                    </td>
                                                                    <td>Vishal Bhatt</td>
                                                                    <td>2019/07/01</td>
                                                                    <td>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="yes6">
                                                                            <label class="custom-control-label" for="yes6">Remember Choice</label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                
                                            

Widgets

Widgets provides you with a quick overview of info you use daily—like your local weather, quickly do a wide variety of tasks such as checking stock prices, and provides access to several fun and functional, mini applications.

Crypto Cards
                                                
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="card bg-orange">
                                                                <div class="card-body">
                                                                    <div id="myCarousel1" class="carousel slide" data-ride="carousel">
                                                                        <!-- Carousel items -->
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item flex-column">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTC text-white display-6" title="BTC"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitcoin</h5>
                                                                                        <h6 class="text-white">Realestate</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 0.08</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -1.06</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -20.10</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item flex-column">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTC text-white display-6" title="BTC"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitcoin</h5>
                                                                                        <h6 class="text-white">Realestate</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 2.08</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -3.06</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -21.01</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item flex-column active">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTC text-white display-6" title="BTC"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitcoin</h5>
                                                                                        <h6 class="text-white">Realestate</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 0.12</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -1.06</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -0.08</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="card bg-secondary">
                                                                <div class="card-body">
                                                                    <div id="myCarousel44" class="carousel slide" data-ride="carousel">
                                                                        <!-- Carousel items -->
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item flex-column">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTM-alt text-white display-6" title="BTM"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitmark</h5>
                                                                                        <h6 class="text-white">Advertising</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 0.18</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -2.06</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -1.10</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item flex-column">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTM-alt text-white display-6" title="BTM"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitmark</h5>
                                                                                        <h6 class="text-white">Advertising</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 2.18</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -3.16</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -2.01</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item flex-column active">
                                                                                <div class="d-flex no-block align-items-center">
                                                                                    <i class="cc BTM-alt text-white display-6" title="BTM"></i>
                                                                                    <div class="mt-2 ml-2">
                                                                                        <h5 class="text-white font-medium">Bitmark</h5>
                                                                                        <h6 class="text-white">Advertising</h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row text-center text-white mt-3">
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 1h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> 0.12</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 24h</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-down"></i> -1.16</p>
                                                                                    </div>
                                                                                    <div class="col-4">
                                                                                        <span class="font-14">% 7d</span>
                                                                                        <p class="font-medium"><i class="fa fa-arrow-up"></i> -1s.08</p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Following Card
user

Daniel Kristeen

[email protected]
Dashboard
UI
UX
+3
                                                
                                                    <div class="card">
                                                        <div class="card-body text-center">
                                                            <div class="profile-pic mb-3 mt-2">
                                                                <img src="../assets/images/users/5.jpg" width="150" class="rounded-circle" alt="user" />
                                                                <h4 class="mt-2">Daniel Kristeen</h4>
                                                                <a href="mailto:[email protected]">[email protected]</a>
                                                            </div>
                                                            <div class="badge badge-pill badge-light font-16">Dashboard</div>
                                                            <div class="badge badge-pill badge-light font-16">UI</div>
                                                            <div class="badge badge-pill badge-light font-16">UX</div>
                                                            <div class="badge badge-pill badge-info font-16" data-toggle="tooltip" data-placement="top" title="3 more">+3</div>
                                                        </div>
                                                        <div class="p-4 border-top">
                                                            <div class="row text-center">
                                                                <div class="col-6 border-right">
                                                                    <a href="#" class="link d-flex align-items-center justify-content-center font-medium"><i class="mdi mdi-message font-20 mr-1"></i>Message</a>
                                                                </div>
                                                                <div class="col-6">
                                                                    <a href="#" class="link d-flex align-items-center justify-content-center font-medium"><i class="mdi mdi-developer-board font-20 mr-1"></i>Portfolio</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Weather Card

Weather Report

73°

Saturday

Ahmedabad, India
Wind ESE 17 mph
Humidity 83%
Pressure 28.56 in
Cloud Cover 78%
Ceiling 25760 ft

  • 09:30

    70°

  • 11:30

    72°

  • 13:30

    75°

  • 15:30

    76°

                                                
                                                    <div class="card m-auto">
                                                        <div class="card-body">
                                                            <div class="d-flex">
                                                                <h4 class="card-title">Weather Report</h4>
                                                                <select class="custom-select w-25 ml-auto">
                                                                    <option selected="">Today</option>
                                                                    <option value="1">Weekly</option>
                                                                </select>
                                                            </div>
                                                            <div class="d-flex align-items-center flex-row m-t-30">
                                                                <div class="p-2 display-5 text-info"><i class="wi wi-day-showers"></i> <span>73<sup>°</sup></span></div>
                                                                <div class="p-2">
                                                                    <h3 class="m-b-0">Saturday</h3><small>Ahmedabad, India</small></div>
                                                            </div>
                                                            <table class="table table-borderless">
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Wind</td>
                                                                        <td class="font-medium">ESE 17 mph</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Humidity</td>
                                                                        <td class="font-medium">83%</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Pressure</td>
                                                                        <td class="font-medium">28.56 in</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Cloud Cover</td>
                                                                        <td class="font-medium">78%</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ceiling</td>
                                                                        <td class="font-medium">25760 ft</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <hr>
                                                            <ul class="list-unstyled row text-center city-weather-days mb-0">
                                                                <li class="col"><i class="wi wi-day-sunny"></i><span>09:30</span>
                                                                    <h3>70<sup>°</sup></h3></li>
                                                                <li class="col"><i class="wi wi-day-cloudy"></i><span>11:30</span>
                                                                    <h3>72<sup>°</sup></h3></li>
                                                                <li class="col"><i class="wi wi-day-hail"></i><span>13:30</span>
                                                                    <h3>75<sup>°</sup></h3></li>
                                                                <li class="col"><i class="wi wi-day-sprinkle"></i><span>15:30</span>
                                                                    <h3>76<sup>°</sup></h3></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                
                                            
Currency Exchange

Currency Exchange

exchange currency from here
                                                
                                                    <div class="card text-white bg-info">
                                                        <div class="card-header">Header</div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Info card title</h5>
                                                            <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>
                                                        </div>
                                                    </div>
                                                
                                            

Dashboard Widgets

Widgets provides you with a quick overview of info you use daily—like your local weather, quickly do a wide variety of tasks such as checking stock prices, and provides access to several fun and functional, mini applications.

Chat Application

Recent Chats

  • user
    Sonu Nigam

    Hi, All!

    10.56 am
  • Genelia

    Hi, How are you Sonu? ur next concert?

    11.00 am
    user
  • user
    Ritesh

    Hi, Sonu and Genelia,

    11.02 am
  • Genelia

    Hi, How are you Sonu? ur next concert?

    11.04 am
    user
                                                
                                                   <div class="card mb-0">
                                                        <div class="card-body">
                                                            <h4 class="card-title">Recent Chats</h4>
                                                            <div class="chat-box scrollable" style="height:475px;">
                                                                <!--chat Row -->
                                                                <ul class="chat-list">
                                                                      <!--chat Row -->
                                                                      <li class="chat-item">
                                                                          <div class="chat-img"><img src="../assets/images/users/1.jpg" alt="user"></div>
                                                                          <div class="chat-content">
                                                                              <div class="box bg-light-success">
                                                                                <h5 class="font-medium">Sonu Nigam</h5>
                                                                                <p class="font-light mb-0">Hi, All!</p>
                                                                                <div class="chat-time">10.56 am</div>
                                                                              </div>
                                                                          </div>
                                                                      </li>
                                                                      <!--chat Row -->
                                                                      <li class="odd chat-item">
                                                                          <div class="chat-content">
                                                                              <div class="box bg-light-success">
                                                                                <h5 class="font-medium">Genelia</h5>
                                                                                <p class="font-light mb-0">Hi, How are you Sonu? ur next concert?</p>
                                                                                <div class="chat-time">11.00 am</div>
                                                                              </div>
                                                                          </div>
                                                                          <div class="chat-img"><img src="../assets/images/users/2.jpg" alt="user"></div>
                                                                      </li>
                                                                      <!--chat Row -->
                                                                      <li class="chat-item">
                                                                          <div class="chat-img"><img src="../assets/images/users/3.jpg" alt="user"></div>
                                                                          <div class="chat-content">
                                                                              <div class="box bg-light-success">
                                                                                <h5 class="font-medium">Ritesh</h5>
                                                                                <p class="font-light mb-0">Hi, Sonu and Genelia,</p>
                                                                                <div class="chat-time">11.02 am</div>
                                                                              </div>
                                                                          </div>
                                                                      </li>
                                                                      <!--chat Row -->
                                                                      <li class="odd chat-item">
                                                                          <div class="chat-content">
                                                                              <div class="box bg-light-success">
                                                                                <h5 class="font-medium">Genelia</h5>
                                                                                <p class="font-light mb-0">Hi, How are you Sonu? ur next concert?</p>
                                                                                <div class="chat-time">11.04 am</div>
                                                                              </div>
                                                                          </div>
                                                                          <div class="chat-img"><img src="../assets/images/users/2.jpg" alt="user"></div>
                                                                      </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="card-body border-top">
                                                            <div class="row">
                                                                <div class="col-9">
                                                                    <div class="input-field mt-0 mb-0">
                                                                        <textarea id="textarea1" placeholder="Type and enter" class="form-control border-0"></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-3">
                                                                    <a class="btn-circle btn-lg btn-cyan float-right text-white" href="javascript:void(0)"><i class="fas fa-paper-plane"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Summery Card
Products Yearly Sales
  • Mac
  • Windows
                                                
                                                    <div class="card mb-0">
                                                        <div class="card-body">
                                                            <h5 class="card-title text-uppercase">Products Yearly Sales</h5>
                                                            <ul class="list-inline dl mb-0 float-right">
                                                                <li class="list-inline-item text-info"><i class="fa fa-circle"></i> Mac</li>
                                                                <li class="list-inline-item text-danger"><i class="fa fa-circle"></i> Windows</li>
                                                            </ul>
                                                            <div id="ct-visits" style="height: 320px;"></div>
                                                        </div>
                                                    </div>
                                                
                                            
Status Card
Finance
Aug
Sep
Oct
Nov
Dec

56%

Increase in Nov
                                                
                                                    <div class="card mb-0">
                                                        <div class="p-3">
                                                            <h5 class="card-title text-uppercase">Finance</h5>
                                                            <div class="">
                                                                <div id="diagram" class="pt-0" style="height: 320px;"></div>
                                                                <div class="get">
                                                                    <div class="arc"> <span class="text">Aug</span>
                                                                        <input type="hidden" class="percent" value="95" />
                                                                        <input type="hidden" class="color" value="#53e69d" /> </div>
                                                                    <div class="arc"> <span class="text">Sep</span>
                                                                        <input type="hidden" class="percent" value="90" />
                                                                        <input type="hidden" class="color" value="#ff7676" /> </div>
                                                                    <div class="arc"> <span class="text">Oct</span>
                                                                        <input type="hidden" class="percent" value="80" />
                                                                        <input type="hidden" class="color" value="#88B8E6" /> </div>
                                                                    <div class="arc"> <span class="text">Nov</span>
                                                                        <input type="hidden" class="percent" value="53" />
                                                                        <input type="hidden" class="color" value="#BEDBE9" /> </div>
                                                                    <div class="arc"> <span class="text">Dec</span>
                                                                        <input type="hidden" class="percent" value="45" />
                                                                        <input type="hidden" class="color" value="#EDEBEE" /> </div>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <h3 class="display-7"><span class="font-medium">56%</span></h3>
                                                                    <h5 class="text-muted mb-0">Increase in Nov</h5>
                                                                </div>
                                                                <div class="ml-auto">
                                                                    <button class="btn btn-success btn-circle btn-lg text-white">
                                                                        <i class="ti-stats-up"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

Datatable

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. For more details refer documentation from here.

Zero Configuration

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary
                                                
                                                    <div class="card mb-0">
                                                        <div class="card-body">
                                                            <h4 class="card-title">Zero Configuration</h4>
                                                            <h6 class="card-subtitle">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function:<code> $().DataTable();</code>.</h6>
                                                            <div class="table-responsive">
                                                                <table id="zero_config" class="table table-striped table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Name</th>
                                                                            <th>Position</th>
                                                                            <th>Office</th>
                                                                            <th>Age</th>
                                                                            <th>Start date</th>
                                                                            <th>Salary</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr>
                                                                            <td>Tiger Nixon</td>
                                                                            <td>System Architect</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>61</td>
                                                                            <td>2011/04/25</td>
                                                                            <td>$320,800</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Garrett Winters</td>
                                                                            <td>Accountant</td>
                                                                            <td>Tokyo</td>
                                                                            <td>63</td>
                                                                            <td>2011/07/25</td>
                                                                            <td>$170,750</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Ashton Cox</td>
                                                                            <td>Junior Technical Author</td>
                                                                            <td>San Francisco</td>
                                                                            <td>66</td>
                                                                            <td>2009/01/12</td>
                                                                            <td>$86,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Cedric Kelly</td>
                                                                            <td>Senior Javascript Developer</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>22</td>
                                                                            <td>2012/03/29</td>
                                                                            <td>$433,060</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Airi Satou</td>
                                                                            <td>Accountant</td>
                                                                            <td>Tokyo</td>
                                                                            <td>33</td>
                                                                            <td>2008/11/28</td>
                                                                            <td>$162,700</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Brielle Williamson</td>
                                                                            <td>Integration Specialist</td>
                                                                            <td>New York</td>
                                                                            <td>61</td>
                                                                            <td>2012/12/02</td>
                                                                            <td>$372,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Herrod Chandler</td>
                                                                            <td>Sales Assistant</td>
                                                                            <td>San Francisco</td>
                                                                            <td>59</td>
                                                                            <td>2012/08/06</td>
                                                                            <td>$137,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Rhona Davidson</td>
                                                                            <td>Integration Specialist</td>
                                                                            <td>Tokyo</td>
                                                                            <td>55</td>
                                                                            <td>2010/10/14</td>
                                                                            <td>$327,900</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Colleen Hurst</td>
                                                                            <td>Javascript Developer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>39</td>
                                                                            <td>2009/09/15</td>
                                                                            <td>$205,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Sonya Frost</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>23</td>
                                                                            <td>2008/12/13</td>
                                                                            <td>$103,600</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jena Gaines</td>
                                                                            <td>Office Manager</td>
                                                                            <td>London</td>
                                                                            <td>30</td>
                                                                            <td>2008/12/19</td>
                                                                            <td>$90,560</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Quinn Flynn</td>
                                                                            <td>Support Lead</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>22</td>
                                                                            <td>2013/03/03</td>
                                                                            <td>$342,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Charde Marshall</td>
                                                                            <td>Regional Director</td>
                                                                            <td>San Francisco</td>
                                                                            <td>36</td>
                                                                            <td>2008/10/16</td>
                                                                            <td>$470,600</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Haley Kennedy</td>
                                                                            <td>Senior Marketing Designer</td>
                                                                            <td>London</td>
                                                                            <td>43</td>
                                                                            <td>2012/12/18</td>
                                                                            <td>$313,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Tatyana Fitzpatrick</td>
                                                                            <td>Regional Director</td>
                                                                            <td>London</td>
                                                                            <td>19</td>
                                                                            <td>2010/03/17</td>
                                                                            <td>$385,750</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Michael Silva</td>
                                                                            <td>Marketing Designer</td>
                                                                            <td>London</td>
                                                                            <td>66</td>
                                                                            <td>2012/11/27</td>
                                                                            <td>$198,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Paul Byrd</td>
                                                                            <td>Chief Financial Officer (CFO)</td>
                                                                            <td>New York</td>
                                                                            <td>64</td>
                                                                            <td>2010/06/09</td>
                                                                            <td>$725,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Gloria Little</td>
                                                                            <td>Systems Administrator</td>
                                                                            <td>New York</td>
                                                                            <td>59</td>
                                                                            <td>2009/04/10</td>
                                                                            <td>$237,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Bradley Greer</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>London</td>
                                                                            <td>41</td>
                                                                            <td>2012/10/13</td>
                                                                            <td>$132,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Dai Rios</td>
                                                                            <td>Personnel Lead</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>35</td>
                                                                            <td>2012/09/26</td>
                                                                            <td>$217,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jenette Caldwell</td>
                                                                            <td>Development Lead</td>
                                                                            <td>New York</td>
                                                                            <td>30</td>
                                                                            <td>2011/09/03</td>
                                                                            <td>$345,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Yuri Berry</td>
                                                                            <td>Chief Marketing Officer (CMO)</td>
                                                                            <td>New York</td>
                                                                            <td>40</td>
                                                                            <td>2009/06/25</td>
                                                                            <td>$675,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Caesar Vance</td>
                                                                            <td>Pre-Sales Support</td>
                                                                            <td>New York</td>
                                                                            <td>21</td>
                                                                            <td>2011/12/12</td>
                                                                            <td>$106,450</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Doris Wilder</td>
                                                                            <td>Sales Assistant</td>
                                                                            <td>Sidney</td>
                                                                            <td>23</td>
                                                                            <td>2010/09/20</td>
                                                                            <td>$85,600</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Angelica Ramos</td>
                                                                            <td>Chief Executive Officer (CEO)</td>
                                                                            <td>London</td>
                                                                            <td>47</td>
                                                                            <td>2009/10/09</td>
                                                                            <td>$1,200,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Gavin Joyce</td>
                                                                            <td>Developer</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>42</td>
                                                                            <td>2010/12/22</td>
                                                                            <td>$92,575</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jennifer Chang</td>
                                                                            <td>Regional Director</td>
                                                                            <td>Singapore</td>
                                                                            <td>28</td>
                                                                            <td>2010/11/14</td>
                                                                            <td>$357,650</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Brenden Wagner</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>28</td>
                                                                            <td>2011/06/07</td>
                                                                            <td>$206,850</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Fiona Green</td>
                                                                            <td>Chief Operating Officer (COO)</td>
                                                                            <td>San Francisco</td>
                                                                            <td>48</td>
                                                                            <td>2010/03/11</td>
                                                                            <td>$850,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Shou Itou</td>
                                                                            <td>Regional Marketing</td>
                                                                            <td>Tokyo</td>
                                                                            <td>20</td>
                                                                            <td>2011/08/14</td>
                                                                            <td>$163,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Michelle House</td>
                                                                            <td>Integration Specialist</td>
                                                                            <td>Sidney</td>
                                                                            <td>37</td>
                                                                            <td>2011/06/02</td>
                                                                            <td>$95,400</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Suki Burks</td>
                                                                            <td>Developer</td>
                                                                            <td>London</td>
                                                                            <td>53</td>
                                                                            <td>2009/10/22</td>
                                                                            <td>$114,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Prescott Bartlett</td>
                                                                            <td>Technical Author</td>
                                                                            <td>London</td>
                                                                            <td>27</td>
                                                                            <td>2011/05/07</td>
                                                                            <td>$145,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Gavin Cortez</td>
                                                                            <td>Team Leader</td>
                                                                            <td>San Francisco</td>
                                                                            <td>22</td>
                                                                            <td>2008/10/26</td>
                                                                            <td>$235,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Martena Mccray</td>
                                                                            <td>Post-Sales support</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>46</td>
                                                                            <td>2011/03/09</td>
                                                                            <td>$324,050</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Unity Butler</td>
                                                                            <td>Marketing Designer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>47</td>
                                                                            <td>2009/12/09</td>
                                                                            <td>$85,675</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Howard Hatfield</td>
                                                                            <td>Office Manager</td>
                                                                            <td>San Francisco</td>
                                                                            <td>51</td>
                                                                            <td>2008/12/16</td>
                                                                            <td>$164,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Hope Fuentes</td>
                                                                            <td>Secretary</td>
                                                                            <td>San Francisco</td>
                                                                            <td>41</td>
                                                                            <td>2010/02/12</td>
                                                                            <td>$109,850</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Vivian Harrell</td>
                                                                            <td>Financial Controller</td>
                                                                            <td>San Francisco</td>
                                                                            <td>62</td>
                                                                            <td>2009/02/14</td>
                                                                            <td>$452,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Timothy Mooney</td>
                                                                            <td>Office Manager</td>
                                                                            <td>London</td>
                                                                            <td>37</td>
                                                                            <td>2008/12/11</td>
                                                                            <td>$136,200</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jackson Bradshaw</td>
                                                                            <td>Director</td>
                                                                            <td>New York</td>
                                                                            <td>65</td>
                                                                            <td>2008/09/26</td>
                                                                            <td>$645,750</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Olivia Liang</td>
                                                                            <td>Support Engineer</td>
                                                                            <td>Singapore</td>
                                                                            <td>64</td>
                                                                            <td>2011/02/03</td>
                                                                            <td>$234,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Bruno Nash</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>London</td>
                                                                            <td>38</td>
                                                                            <td>2011/05/03</td>
                                                                            <td>$163,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Sakura Yamamoto</td>
                                                                            <td>Support Engineer</td>
                                                                            <td>Tokyo</td>
                                                                            <td>37</td>
                                                                            <td>2009/08/19</td>
                                                                            <td>$139,575</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Thor Walton</td>
                                                                            <td>Developer</td>
                                                                            <td>New York</td>
                                                                            <td>61</td>
                                                                            <td>2013/08/11</td>
                                                                            <td>$98,540</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Finn Camacho</td>
                                                                            <td>Support Engineer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>47</td>
                                                                            <td>2009/07/07</td>
                                                                            <td>$87,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Serge Baldwin</td>
                                                                            <td>Data Coordinator</td>
                                                                            <td>Singapore</td>
                                                                            <td>64</td>
                                                                            <td>2012/04/09</td>
                                                                            <td>$138,575</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Zenaida Frank</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>New York</td>
                                                                            <td>63</td>
                                                                            <td>2010/01/04</td>
                                                                            <td>$125,250</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Zorita Serrano</td>
                                                                            <td>Software Engineer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>56</td>
                                                                            <td>2012/06/01</td>
                                                                            <td>$115,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jennifer Acosta</td>
                                                                            <td>Junior Javascript Developer</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>43</td>
                                                                            <td>2013/02/01</td>
                                                                            <td>$75,650</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Cara Stevens</td>
                                                                            <td>Sales Assistant</td>
                                                                            <td>New York</td>
                                                                            <td>46</td>
                                                                            <td>2011/12/06</td>
                                                                            <td>$145,600</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Hermione Butler</td>
                                                                            <td>Regional Director</td>
                                                                            <td>London</td>
                                                                            <td>47</td>
                                                                            <td>2011/03/21</td>
                                                                            <td>$356,250</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Lael Greer</td>
                                                                            <td>Systems Administrator</td>
                                                                            <td>London</td>
                                                                            <td>21</td>
                                                                            <td>2009/02/27</td>
                                                                            <td>$103,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Jonas Alexander</td>
                                                                            <td>Developer</td>
                                                                            <td>San Francisco</td>
                                                                            <td>30</td>
                                                                            <td>2010/07/14</td>
                                                                            <td>$86,500</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Shad Decker</td>
                                                                            <td>Regional Director</td>
                                                                            <td>Edinburgh</td>
                                                                            <td>51</td>
                                                                            <td>2008/11/13</td>
                                                                            <td>$183,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Michael Bruce</td>
                                                                            <td>Javascript Developer</td>
                                                                            <td>Singapore</td>
                                                                            <td>29</td>
                                                                            <td>2011/06/27</td>
                                                                            <td>$183,000</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Donna Snider</td>
                                                                            <td>Customer Support</td>
                                                                            <td>New York</td>
                                                                            <td>27</td>
                                                                            <td>2011/01/25</td>
                                                                            <td>$112,000</td>
                                                                        </tr>
                                                                    </tbody>
                                                                    <tfoot>
                                                                        <tr>
                                                                            <th>Name</th>
                                                                            <th>Position</th>
                                                                            <th>Office</th>
                                                                            <th>Age</th>
                                                                            <th>Start date</th>
                                                                            <th>Salary</th>
                                                                        </tr>
                                                                    </tfoot>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
                                                
                                                    // ============================================================== 
                                                    // Third Party Plugin CSS
                                                    // ============================================================== 
                                                    <link href="../assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet">
                                                    // ============================================================== 
                                                    // Third Party Plugin Js
                                                    // ==============================================================
                                                    <script src="../assets/extra-libs/DataTables/datatables.min.js"></script> 
                                                
                                            
                                                
                                                    // ============================================================== 
                                                    // Initializing Datatable
                                                    // ==============================================================
                                                    $('#zero_config').DataTable();
                                                
                                            

Form Advanced

Select2

Select2 provides a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.For more details please refer documentation from here.

                                                
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="card mb-0">
                                                                <div class="card-body">
                                                                    <label>Single Select</label>
                                                                    <select class="select2 form-control custom-select" style="width: 100%; height:36px;">
                                                                        <option>Select</option>
                                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                            <option value="AK">Alaska</option>
                                                                            <option value="HI">Hawaii</option>
                                                                        </optgroup>
                                                                        <optgroup label="Pacific Time Zone">
                                                                            <option value="CA">California</option>
                                                                            <option value="NV">Nevada</option>
                                                                            <option value="OR">Oregon</option>
                                                                            <option value="WA">Washington</option>
                                                                        </optgroup>
                                                                        <optgroup label="Mountain Time Zone">
                                                                            <option value="AZ">Arizona</option>
                                                                            <option value="CO">Colorado</option>
                                                                            <option value="ID">Idaho</option>
                                                                            <option value="MT">Montana</option>
                                                                            <option value="NE">Nebraska</option>
                                                                            <option value="NM">New Mexico</option>
                                                                            <option value="ND">North Dakota</option>
                                                                            <option value="UT">Utah</option>
                                                                            <option value="WY">Wyoming</option>
                                                                        </optgroup>
                                                                        <optgroup label="Central Time Zone">
                                                                            <option value="AL">Alabama</option>
                                                                            <option value="AR">Arkansas</option>
                                                                            <option value="IL">Illinois</option>
                                                                            <option value="IA">Iowa</option>
                                                                            <option value="KS">Kansas</option>
                                                                            <option value="KY">Kentucky</option>
                                                                            <option value="LA">Louisiana</option>
                                                                            <option value="MN">Minnesota</option>
                                                                            <option value="MS">Mississippi</option>
                                                                            <option value="MO">Missouri</option>
                                                                            <option value="OK">Oklahoma</option>
                                                                            <option value="SD">South Dakota</option>
                                                                            <option value="TX">Texas</option>
                                                                            <option value="TN">Tennessee</option>
                                                                            <option value="WI">Wisconsin</option>
                                                                        </optgroup>
                                                                        <optgroup label="Eastern Time Zone">
                                                                            <option value="CT">Connecticut</option>
                                                                            <option value="DE">Delaware</option>
                                                                            <option value="FL">Florida</option>
                                                                            <option value="GA">Georgia</option>
                                                                            <option value="IN">Indiana</option>
                                                                            <option value="ME">Maine</option>
                                                                            <option value="MD">Maryland</option>
                                                                            <option value="MA">Massachusetts</option>
                                                                            <option value="MI">Michigan</option>
                                                                            <option value="NH">New Hampshire</option>
                                                                            <option value="NJ">New Jersey</option>
                                                                            <option value="NY">New York</option>
                                                                            <option value="NC">North Carolina</option>
                                                                            <option value="OH">Ohio</option>
                                                                            <option value="PA">Pennsylvania</option>
                                                                            <option value="RI">Rhode Island</option>
                                                                            <option value="SC">South Carolina</option>
                                                                            <option value="VT">Vermont</option>
                                                                            <option value="VA">Virginia</option>
                                                                            <option value="WV">West Virginia</option>
                                                                        </optgroup>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="card mb-0">
                                                                <div class="card-body">
                                                                    <label>Multiple Select</label>
                                                                    <select class="select2 form-control" multiple="multiple" style="width: 100%; height:36px;">
                                                                        <option>Select</option>
                                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                            <option value="AK">Alaska</option>
                                                                            <option value="HI">Hawaii</option>
                                                                        </optgroup>
                                                                        <optgroup label="Pacific Time Zone">
                                                                            <option value="CA">California</option>
                                                                            <option value="NV">Nevada</option>
                                                                            <option value="OR">Oregon</option>
                                                                            <option value="WA">Washington</option>
                                                                        </optgroup>
                                                                        <optgroup label="Mountain Time Zone">
                                                                            <option value="AZ">Arizona</option>
                                                                            <option value="CO">Colorado</option>
                                                                            <option value="ID">Idaho</option>
                                                                            <option value="MT">Montana</option>
                                                                            <option value="NE">Nebraska</option>
                                                                            <option value="NM">New Mexico</option>
                                                                            <option value="ND">North Dakota</option>
                                                                            <option value="UT">Utah</option>
                                                                            <option value="WY">Wyoming</option>
                                                                        </optgroup>
                                                                        <optgroup label="Central Time Zone">
                                                                            <option value="AL">Alabama</option>
                                                                            <option value="AR">Arkansas</option>
                                                                            <option value="IL">Illinois</option>
                                                                            <option value="IA">Iowa</option>
                                                                            <option value="KS">Kansas</option>
                                                                            <option value="KY">Kentucky</option>
                                                                            <option value="LA">Louisiana</option>
                                                                            <option value="MN">Minnesota</option>
                                                                            <option value="MS">Mississippi</option>
                                                                            <option value="MO">Missouri</option>
                                                                            <option value="OK">Oklahoma</option>
                                                                            <option value="SD">South Dakota</option>
                                                                            <option value="TX">Texas</option>
                                                                            <option value="TN">Tennessee</option>
                                                                            <option value="WI">Wisconsin</option>
                                                                        </optgroup>
                                                                        <optgroup label="Eastern Time Zone">
                                                                            <option value="CT">Connecticut</option>
                                                                            <option value="DE">Delaware</option>
                                                                            <option value="FL">Florida</option>
                                                                            <option value="GA">Georgia</option>
                                                                            <option value="IN">Indiana</option>
                                                                            <option value="ME">Maine</option>
                                                                            <option value="MD">Maryland</option>
                                                                            <option value="MA">Massachusetts</option>
                                                                            <option value="MI">Michigan</option>
                                                                            <option value="NH">New Hampshire</option>
                                                                            <option value="NJ">New Jersey</option>
                                                                            <option value="NY">New York</option>
                                                                            <option value="NC">North Carolina</option>
                                                                            <option value="OH">Ohio</option>
                                                                            <option value="PA">Pennsylvania</option>
                                                                            <option value="RI">Rhode Island</option>
                                                                            <option value="SC">South Carolina</option>
                                                                            <option value="VT">Vermont</option>
                                                                            <option value="VA">Virginia</option>
                                                                            <option value="WV">West Virginia</option>
                                                                        </optgroup>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
Form Bootstrap Rangepicker
                                                
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="card mb-0">
                                                                <div class="card-body">
                                                                    <label>Default Daterange Picker</label>
                                                                    <div class='input-group mb-3'>
                                                                        <input type='text' class="form-control daterange" />
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text">
                                                                                <span class="ti-calendar"></span>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <label>Date and Time</label>
                                                                    <div class='input-group'>
                                                                        <input type='text' class="form-control datetime" />
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text">
                                                                                <span class="ti-calendar"></span>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="card mb-0">
                                                                <div class="card-body">
                                                                    <label>Seconds with 24 hour Time</label>
                                                                    <div class='input-group mb-3'>
                                                                        <input type='text' class="form-control timeseconds" />
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text">
                                                                                <span class="ti-calendar"></span>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <label>Separate Date Picker</label>
                                                                    <div class='input-group'>
                                                                        <input type='text' class="form-control singledate" />
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text">
                                                                                <span class="ti-calendar"></span>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

Different Chart

We are used different charts so you can set chart as per you requirements and also customize with js options which are given by default charts js.

Sparkline Charts
Mothly Site Traffic
18% High then last month
Overall Growth
80.40%
Montly
20.40%
Day
5.40%
Weekly Site Traffic
18% High then last month
Overall Growth
80.40%
Montly
20.40%
Day
5.40%
                                                
                                                    <div class="row justify-content-md-center">
                                                        <!-- column -->
                                                        <div class="col-sm-12 col-lg-5">
                                                            <div class="card">
                                                                <div class="card-body">
                                                                    <div class="d-flex align-items-center mb-3">
                                                                        <h5 class="card-title text-uppercase mb-0">Mothly Site Traffic</h5>
                                                                        <div class="ml-auto">
                                                                            <small class="text-success"><i class="fas fa-sort-up"></i> 18% High then last month</small>
                                                                        </div>
                                                                     </div>
                                                                    <div class="d-flex flex-row">
                                                                        <div class="p-2 pl-0 border-right">
                                                                            <h6 class="font-light">Overall Growth</h6><span class="font-medium">80.40%</span></div>
                                                                        <div class="p-2 border-right">
                                                                            <h6 class="font-light">Montly</h6><span class="font-medium">20.40%</span>
                                                                        </div>
                                                                        <div class="p-2">
                                                                            <h6 class="font-light">Day</h6><span class="font-medium">5.40%</span>
                                                                        </div>
                                                                    </div>
                                                                    <div id="spark1" class="sparkchart mt-3"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- column -->
                                                        <div class="col-sm-12 col-lg-5">
                                                            <div class="card">
                                                                <div class="card-body">
                                                                    <div class="d-flex align-items-center mb-3">
                                                                        <h5 class="card-title text-uppercase mb-0">Weekly Site Traffic</h5>
                                                                        <div class="ml-auto">
                                                                            <small class="text-danger"><i class="fas fa-sort-down"></i> 18% High then last month</small>
                                                                        </div>
                                                                     </div>
                                                                    <div class="d-flex flex-row">
                                                                        <div class="p-2 pl-0 border-right">
                                                                            <h6 class="font-light">Overall Growth</h6><span class="font-medium">80.40%</span></div>
                                                                        <div class="p-2 border-right">
                                                                            <h6 class="font-light">Montly</h6><span class="font-medium">20.40%</span>
                                                                        </div>
                                                                        <div class="p-2">
                                                                            <h6 class="font-light">Day</h6><span class="font-medium">5.40%</span>
                                                                        </div>
                                                                    </div>
                                                                    <div id="spark2" class="sparkchart mt-3"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
                                                
                                                    <!-- Third Party Plugin Js Files -->
                                                     <script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
                                                    <!-- Third Party Plugin Js Files -->
                                                
                                            
C3 Charts

C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more.

C3 Donut Chart

                                                
                                                    <div class="card mb-0">
                                                        <div class="card-body">
                                                            <h4 class="card-title">C3 Donut Chart</h4>
                                                            <div id="donut-chart"></div>
                                                        </div>
                                                    </div>
                                                
                                            
                                                
                                                    <!-- Third Party Plugin CSS Files -->
                                                    <link href="../assets/extra-libs/c3/c3.min.css" rel="stylesheet">
                                                    <!-- Third Party Plugin CSS Files -->


                                                    <!-- Third Party Plugin Js Files -->
                                                    <script src="../assets/extra-libs/c3/d3.min.js"></script>
                                                    <script src="../assets/extra-libs/c3/c3.min.js"></script>
                                                    <!-- Third Party Plugin Js Files -->
                                                
                                            
Chartist Charts

3456

Yearly Sales

356

Monthly Sales
                                                
                                                    <div class="row justify-content-md-center">
                                                        <!-- column -->
                                                        <div class="col-sm-12 col-lg-5">
                                                            <div class="card mb-0">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col-6">
                                                                            <h2 class="font-medium mb-0">3456</h2>
                                                                            <h5 class="text-muted mb-0">Yearly Sales</h5>
                                                                        </div>
                                                                        <div class="col-6">
                                                                            <div id="ct-main-bal" style="height: 57px"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-lg-5">
                                                            <div class="card">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col-6">
                                                                            <h2 class="mb-0 font-medium">356</h2>
                                                                            <h5 class="text-muted mb-0">Monthly Sales</h5>
                                                                        </div>
                                                                        <div class="col-6">
                                                                            <div id="ct-extra" style="height: 57px"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
                                                
                                                    <!-- Third Party Plugin CSS Files -->
                                                    <link href="../../assets/libs/chartist/dist/chartist.min.css" rel="stylesheet">
                                                    <link href="../../dist/js/pages/chartist/chartist-init.css" rel="stylesheet">
                                                    <link href="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" rel="stylesheet">
                                                    <!-- Third Party Plugin CSS Files -->
                                                    <!-- Third Party Plugin JS Files -->
                                                    <script src="../../assets/libs/chartist/dist/chartist.min.js"></script>
                                                    <script src="../../dist/js/pages/chartist/chartist-plugin-tooltip.js"></script>
                                                    <!-- Third Party Plugin JS Files -->
                                                
                                            

Free support


If you have any type of query or support needed, please open a support ticket here: wrappixel.com/support/

Thank you
© 2019 Ample admin by wrappixel.com