Document
Introduction
Bootstrap 4.3.1 framework based HTML responsive template with wide range of pre-designed HTML widgets, blocks and styles.
AdminuxPRO is based on bootstrap framework 4.3.1 and we provide wide range of customized, unique creative and flexible components. We also growing component library with widgets and other third party customizations. We also target to create many other demo application for our customer so they can easily get ready html pages code that can be satisfy requirements.
Here, Guidelines provided is for understanding of basic structure framework and about template. We have mentioned all the criteria which are unique and for easy to understand. We welcomes if anything missed or required more clarifications. For the third parties we recommend to visit official documents for complete guidelines about third parties. We have used Bracket.io html editor during this documentation and code writing.
We also created color themes with different css you can switch other style theme with class name appends on HTML tag.
Folder structure
-HTML
-assets
+ css
+ img
+ js
+ vendors
- pages
...
...
...
.html website pages
...
...
...
+ ANGULAR8-Starter-kit
+ ADOBE-XD
+ PNG
- HTML: Main project source file for HTML template are in this folder
- assets: All the assets images js and vendor third parties are available in this folder
- css: Template css are placed at this folder
-
img: All images used in tempaltes for display purpose are stored here (Does not included third party plugin's image in this folder)
- js: Template js files kept in this folder
- vendors: We have try to include many ofthe thrid party with our template to show how it looks like with our template theme. mostly we have used MIT licence and free commercial use licences but further We strongly recommand to check licence once if your business domain, content are allow you to use thrid party.
- pages: We have unique and creative designs for some of common pages used in websites are into this folder.
- ANGULAR8-Starter-kit: Angular project folder run npm intall and npm start after opening into editor terminal
- ADOBE-XD: Few dashboard screen are available in Adobe XD source file
- PNG: Screen preview images are in this folder for Adobe XD dashboard files.
All the assets are placed in folder are as per our requirements for demo and template. You can start with fresh copy and can add items as per your need in the mobile application or mobile website creation. Fresh page consider blank.html with minimal available page content.
Browsers
AdminuxPRO works smoothly with cross browsers. We do care about compatibility.
Our base framework is Bootstrap 4.3.1 which uses many of css3 properties and are compatible with latest modern browsers. Framework uses flex properties for grid structure and we also continued with that only to use of latest technology and design concepts. You can check it out framework guideline regarding compatible browser are at
click here.
We have tested template with new latest browsers Chrome, IE 11, MS Edge, Mozilla Firefox. Our template is also responsive liquid width support some of the contents are depend on length and counts so consider while implementing if you are planning for minimum device support.
This is also HTML css and js template which can help you to support in other technology like Angular, vue js, .net, php developments. Which renders HTML into browsers. Some of technology which uses the HTML template for devices like phone gap can also be used with this template to create hybrid mobile app.
You can check out our demos. We are still growing and provide more application demos with new features and facility.
Internet Explorer 10+ is supported; IE9 and older will be not supported. You can check % of browsers are used word wide with version to get idea about how important it is. Make sure that some CSS3 properties and HTML5 elements are not fully supported in IE10 and this may require prefixed css.
Colors Templating
AdminuxPRO comes with predefined themes for different color schemes.
AdminuxPRO comes with predefined css with different shades. You can access our demos and click on pallet icon at bottom right corner. Select color you like this color demo pallet require local host or hosting files somewhere. Also predefined css can be replaced in CSS in HTML head tag by just replacing stlysheet name.
Default white css file:
<link href="../assets/css/style-darkblue-dark.css" rel="stylesheet" id="stylelink">style-black-dark.css
style-darkblue-dark.css
style-darkblue-light.css
style-green-light.css
style-purple-light.css
etc... 16 stylesheet colors available
Layout classes
We have added few classes to make changes in layout display. Directly add and remove on body tag like as below:- sidemenu-open: To close sidemenu remove this class on load js and from body tag
- sidebar-compact: sidebar icon and text a compact sidebar display
- sidebar-icon: sidebar icon only small sidebar display
- sidebar-fill: sidebar background color by default is transparent
- header-fixed-top: Add this class on body tab to make fixed header
- header-fill: header background color by default is transparent
Icons
We have used icons from material icons and can be found at : https://material.io/tools/icons/
Use code as below mentioned where "text-danger" is just color class for red color :
favorite<i class="material-icons text-danger" >favorite<i>Scripts
AdminuxPRO comes with predefined script formenu close and template color schemes.
For jQuery and framework js files, you can find it at bottom of the page code. First all three files are added and later our custom css added. You can add any other css from third party in between of these two group framework js and custom js. However custom js comes with code which we requires in template for all features. you can define your js as per your need.
We have added comments at start of each script for functionalities we have used.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../assets/js/jquery-3.3.1.min.js"></script>
<script src="../assets/popper.min.js"></script>
<script src="../assets/vendor/bootstrap-4.3.1/js/bootstrap.min.js"></script>
<!-- template custom js -->
<script src="../assets/js/main.js"></script>
<!-- theme picker -->
<script src="../assets/js/style-picker.js"></script>
<!-- theme picker ends -->
More
AdminuxPRO is crafted with uniqueness and modern touch
For begining page you can start with the default page code for template.
<!DOCTYPE html>
<!--
Template Name: AdminUX-Pro - Responsive Admin Dashboard Template build with Bootstrap 4.3.1
Version: 1.0.0
Author: Maxartkiller
Website: https://www.maxartkiller.com/
Contact: info@maxartkiller.com
Follow: www.twitter.com/maxartkiller
Like: www.facebook.com/maxartkiller
Purchase: https://www.maxartkiller.com/
License: You must have a valid license purchased only from maxartkiller.com in order to legally use the theme for your project.
-->
<html lang="en">
<!-- Head tag -->
<head>
<meta charset="utf-8" />
<title>AdminUX-PRO | Admin Dashboard HTML Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Worlds Best Admin UX Dashbaoard PRO version for bootstrap template, Select, Calandar, Report, Charts, Tables etc." name="description" />
<meta content="" name="author" />
<link rel="shortcut icon" href="../assets/img/logoicon.png">
<!-- g fonts style -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<!-- g fonts style ends -->
<!-- Vendor or 3rd party style -->
<!-- material icons -->
<link href="../assets/vendor/material-icons/material-icons.css" rel="stylesheet">
<!-- flags icons -->
<link href="../assets/vendor/flags/css/flag-icon.min.css" rel="stylesheet">
<!-- daterange picker -->
<link href="../assets/vendor/daterangepicker-master/daterangepicker.css" rel="stylesheet">
<!-- Vendor or 3rd party style ends -->
<!-- Customized template style mandatory -->
<link href="../assets/css/style-darkblue-dark.css" rel="stylesheet" id="stylelink">
<!-- Customized template style ends -->
</head>
<!-- Head tag ends -->
<!-- Body -->
<body class="sidemenu-open">
<!-- Sidebar starts -->
<div class="sidebar">
<!-- Logo sidebar -->
<a href="" class="logo">
<img src="../assets/img/logoicon.svg" alt="" class="logo-icon">
<div class="logo-text">
<h5 class="fs22 mb-0">AdminUX <sup class="badge badge-danger">PRO</sup></h5>
<p class="text-uppercase fs11">Admin Dashboard</p>
</div>
</a>
<!-- Logo sidebar ends -->
<!-- Navigation menu sidebar-->
<h6 class="subtitle fs11">Navigation Menu</h6>
<ul class="nav flex-column">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)"><i class="material-icons icon">dashboard</i><span>Dashboard</span> <i class="material-icons arrow">expand_more</i></a>
<div class="nav flex-column">
<div class="nav-item"><a class="nav-link" href="dashboard-production.html"><span>Production</span></a></div>
<div class="nav-item"><a class="nav-link" href="dashboard-networking.html"><span>Networking</span></a></div>
</div>
</li>
</ul>
<!-- Navigation menu sidebar ends -->
<br>
<!-- Upgrade notification -->
<div class="row mx-0 upgrad-box">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h4 class="fs15 font-weight-light mb-3">Upgrade <a class="close-btn"><i class="material-icons">close</i></a></h4>
<p class="text-mute">01:45 hrs remaining of your trial period</p>
</div>
</div>
</div>
</div>
<!-- Upgrade notification ends -->
<!-- Setting link -->
<ul class="nav flex-column">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)"><i class="material-icons icon">settings_applications</i><span>Settings</span> <i class="material-icons arrow">expand_more</i></a>
<div class="nav flex-column">
<div class="nav-item"><a class="nav-link" href="profile-setting.html"><span>Profile Setting</span></a></div>
<div class="nav-item"><a class="nav-link" href="privacy-setting.html"><span>Privacy</span></a></div>
<div class="nav-item"><a class="nav-link" href="email.html"><span>Email</span></a></div>
</div>
</li>
</ul>
<!-- Setting link -->
</div>
<!-- Sidebar ends -->
<!-- wrapper starts -->
<div class="wrapper">
<div class="content shadow-sm">
<div class="container-fluid header-container">
<div class="row header">
<div class="container-fluid " id="header-container">
<div class="row">
<!-- Header starts -->
<nav class="navbar col-12 navbar-expand ">
<button class="menu-btn btn btn-link btn-sm" type="button">
<i class="material-icons">menu</i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- search starts -->
<form class="form-inline search mr-auto">
<input class="form-control form-control-sm" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-link btn-sm" type="submit"><i class="material-icons">search</i></button>
</form>
<!-- search ends -->
<!-- large desktop market rates starts -->
<div class="mx-auto d-none d-xxl-inline">
<div class="row mx-0">
<div class="col-auto pr-0 align-self-center"><i class="material-icons vm">public</i></div>
<div class="col-auto">
<h5 class="fs15 font-weight-normal mb-0">Market <span class="text-danger mx-1"><i class="material-icons vm">arrow_drop_down</i></span> 254608 $</h5>
<p class="fs11"><span>Live</span> <span class="text-danger">-0.1%</span> <span>(2487 $)</span></p>
</div>
<div class="col-auto border-left-dashed">
<h5 class="fs15 font-weight-normal mb-0">Update <span class="text-success mx-1"><i class="material-icons vm">arrow_drop_up</i></span> 254608 $</h5>
<p class="fs11"><span>Live</span> <span class="text-success">+0.1%</span> <span>(2487 $)</span></p>
</div>
</div>
</div>
<!-- large desktop market rates ends -->
<!-- icons dropwdowns starts -->
<ul class="navbar-nav ml-auto">
<!-- profile dropdown-->
<li class="nav-item dropdown ml-0 ml-sm-4">
<a class="nav-link dropdown-toggle profile-link" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<figure class="rounded avatar avatar-30">
<img src="../assets/img/user1.png" alt="">
</figure>
<div class="username-text ml-2 mr-2 d-none d-lg-inline-block">
<h6 class="username"><span>Welcome,</span>Maxartkiller</h6>
</div>
<figure class="rounded avatar avatar-30 d-none d-md-inline-block">
<i class="material-icons">expand_more</i>
</figure>
</a>
<div class="dropdown-menu dropdown-menu-right w-300 pt-0 overflow-hidden" aria-labelledby="navbarDropdown6">
<div class="position-relative text-center rounded py-5">
<div class="background">
<img src="../assets/img/background-part.png" alt="">
</div>
</div>
<div class="text-center mb-3 top-60 z-2">
<figure class="avatar avatar-120 mx-auto shadow"><img src="../assets/img/user1.png" alt=""></figure>
</div>
<h5 class="text-center mb-0">Maxartkiller</h5>
<p class="text-center">UX Designer</p>
<p class="text-center text-secondary fs13">Delhi, India</p>
<a class="dropdown-item border-top" href="#">
<div class="row">
<div class="col-auto align-self-center">
<i class="material-icons text-success">account_box</i>
</div>
<div class="col pl-0">
<p class="mb-0">My Profile</p>
<p class="small text-mute text-trucated">Update details and information</p>
</div>
<div class="col-auto align-self-center text-right pl-0">
<i class="material-icons text-mute small">chevron_right</i>
</div>
</div>
</a>
<a class="dropdown-item border-top" href="#">
<div class="row">
<div class="col-auto align-self-center">
<i class="material-icons text-info">account_balance_wallet</i>
</div>
<div class="col pl-0">
<p class="mb-0">My Wallet</p>
<p class="small text-mute text-trucated">Add Money or withdrow</p>
</div>
<div class="col-auto align-self-center text-right pl-0">
<i class="material-icons text-mute small">chevron_right</i>
</div>
</div>
</a>
<a class="dropdown-item border-top" href="#">
<div class="row">
<div class="col-auto align-self-center">
<i class="material-icons text-warning">date_range</i>
</div>
<div class="col pl-0">
<p class="mb-0">My Schedule</p>
<p class="small text-mute text-trucated">Appointments and schedules</p>
</div>
<div class="col-auto align-self-center text-right pl-0">
<i class="material-icons text-mute small">chevron_right</i>
</div>
</div>
</a>
<a class="dropdown-item border-top" href="#">
<div class="row">
<div class="col-auto align-self-center">
<i class="material-icons text-danger">exit_to_app</i>
</div>
<div class="col pl-0">
<p class="mb-0 text-danger">Logout</p>
</div>
<div class="col-auto align-self-center text-right pl-0">
<i class="material-icons text-mute small text-danger">chevron_right</i>
</div>
</div>
</a>
</div>
</li>
</ul>
<!-- icons dropwdowns starts -->
</div>
</nav>
<!-- Header ends -->
</div>
</div>
</div>
<div class="row submenu">
<div class="container-fluid " id="submenu-container">
<div class="row">
<!-- Submenu section starts -->
<nav class="navbar col-12 ">
<div class="dropdown mr-auto d-flex d-sm-none">
<button class="btn dropdown-toggle btn-sm btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dashboard
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Featured</a>
<a class="dropdown-item" href="#">popular</a>
</div>
</div>
<ul class="nav nav-pills mr-auto d-none d-sm-flex">
<li class="nav-item ">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">popular</a>
</li>
</ul>
<ul class="nav nav-pills ml-auto d-none d-xl-flex">
<li class="nav-item">
<a class="nav-link" href="#">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">This week</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">This Month</a>
</li>
</ul>
<form class="form-inline ml-auto ml-sm-3">
<div id="daterangeadminux" class="form-control form-control-sm">
<span></span> <i class="material-icons avatar avatar-26 text-template-primary cal-icon">event</i>
</div>
</form>
</nav>
<!-- Submenu section ends -->
</div>
</div>
</div>
</div>
<!-- Main container starts -->
<div class="container main-container" id="main-container">
Main Content Container
</div>
<!-- Main container ends -->
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md text-center text-md-left align-self-center">
<p>All rights reserved by <a href="">Maxartkiller</a></p>
</div>
<div class="col-12 col-md-auto text-center text-md-right">
<ul class="nav justify-content-center justify-md-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Terms of use</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- wrapper ends -->
<!-- Chat window and buttons starts -->
<div class="wrap-fixed-float wrap-fixed-bottom-left">
<button class="btn btn-primary btn-rounded-circle shadow chat-btn"><i class="material-icons vm">comment</i></button>
<div class="chat-window card shadow">
<div class="card-header">
<h5 class="d-inline-block fs15 mb-0">Quick Chat</h5>
<button class="btn btn-sm p-0 float-right chat-close text-white">
<span class="rounded avatar avatar-20">
<i class="material-icons fs15 vm text-mute">close</i>
</span>
</button>
</div>
<div class="card-body chat-list scroll-y p-0 ">
<div class="p-3">
<div class="row left-chat">
<div class="col-auto">
<figure class="avatar avatar-20">
<img src="../assets/img/user1.png" alt="">
</figure>
</div>
<div class="col pl-0">
<div class="chat-block">
<div class="row">
<div class="col">
How are you? AdminuxPRO we were waitedsince long to be here.
<p class="text-mute small mt-2">8:00 pm</p>
</div>
</div>
</div>
</div>
</div>
<div class="row right-chat">
<div class="col pr-0">
<div class="chat-block">
<div class="row">
<div class="col">
How are you? AdminuxPRO we were waited since long to be here.
<p class="text-mute small mt-2">8:00 pm</p>
</div>
</div>
</div>
</div>
<div class="col-auto">
<figure class="avatar avatar-20">
<img src="../assets/img/user3.png" alt="">
</figure>
</div>
</div>
<div class="row left-chat">
<div class="col-auto">
<figure class="avatar avatar-20">
<img src="../assets/img/user1.png" alt="">
</figure>
</div>
<div class="col pl-0">
<div class="chat-block">
<div class="row">
<div class="col">
How are you? AdminuxPRO we were waited since long to be here.
<p class="text-mute small mt-2">8:00 pm</p>
</div>
</div>
</div>
</div>
</div>
<div class="row right-chat">
<div class="col pr-0">
<div class="chat-block">
<div class="row">
<div class="col">
<p>AdminuxPRO is HTML template can be used in various business domains like Manufacturing, inventory, IT, administration etc. for admin dashbaords </p>
<p class="text-mute small mt-2">8:00 pm</p>
</div>
</div>
</div>
</div>
<div class="col-auto">
<figure class="avatar avatar-20">
<img src="../assets/img/user3.png" alt="">
</figure>
</div>
</div>
</div>
</div>
<div class="card-footer px-0">
<div class="input-group">
<div class="input-group-prepend ">
<button class="btn btn-link fs15 py-0 " type="button" id="button-addon4"><i class="material-icons vm">attachment</i></button>
</div>
<input type="text" class="form-control form-control-sm rounded" placeholder="Type Message..." aria-label="Message">
<div class="input-group-append ">
<button class="btn btn-link py-0 " type="button" id="button-addon5">
<i class="material-icons fs15 vm">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Chat window and buttons ends -->
<!-- Theme style picker modal window and options -->
<div class="wrap-fixed-float wrap-fixed-bottom-right">
<button class="btn btn-primary btn-rounded-circle shadow" data-target="#themepicker" data-toggle="modal"><i class="material-icons vm">style</i><span class="counter-small bg-danger"></span></button>
</div>
<!-- Modal -->
<div class="modal fade" id="themepicker" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content shadow-lg-dark overflow-hidden">
<div class="modal-body">
<div class="background h-320">
<img src="../assets/img/background-part.png" alt="">
</div>
<div class="text-center pb-5">
<h1 class="mt-3 mb-0 text-white">Personalize</h1>
<h4 class="mb-5 text-white font-weight-light">Make it more like yours</h4>
</div>
<div class="row top-60">
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card border-0 shadow bg-white h-100">
<div class="card-body text-center">
<i class="avatar avatar-60 md-36 material-icons text-template-primary my-3">format_shapes</i>
<h6 class="mb-3">Font Size</h6>
<div class="row">
<div class="col-12 px-0">
<ul class="list-group list-group-flush mb-0 text-left">
<li class="list-group-item">
XS
<div class="custom-control custom-switch float-right">
<input type="radio" name="fontsize" class="custom-control-input" id="xsmallfs">
<label class="custom-control-label" for="xsmallfs"></label>
</div>
</li>
<li class="list-group-item">
S
<div class="custom-control custom-switch float-right">
<input type="radio" name="fontsize" class="custom-control-input" id="smallfs" checked>
<label class="custom-control-label" for="smallfs"></label>
</div>
</li>
<li class="list-group-item">
M
<div class="custom-control custom-switch float-right">
<input type="radio" name="fontsize" class="custom-control-input" id="mediumfs">
<label class="custom-control-label" for="mediumfs"></label>
</div>
</li>
<li class="list-group-item">
L
<div class="custom-control custom-switch float-right">
<input type="radio" name="fontsize" class="custom-control-input" id="largefs">
<label class="custom-control-label" for="largefs"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card border-0 shadow bg-white h-100">
<div class="card-body text-center">
<i class="avatar avatar-60 md-36 material-icons bg-light-warning text-warning my-3">style</i>
<h6 class="mb-3">Sidebar</h6>
<div class="row">
<div class="col-12 px-0">
<ul class="list-group list-group-flush mb-0 text-left">
<li class="list-group-item">
Normal
<div class="custom-control custom-switch float-right">
<input type="radio" name="sidebar" class="custom-control-input" id="sidebarfull" checked>
<label class="custom-control-label" for="sidebarfull"></label>
</div>
</li>
<li class="list-group-item">
Compact
<div class="custom-control custom-switch float-right">
<input type="radio" name="sidebar" class="custom-control-input" id="sidebarCompact">
<label class="custom-control-label" for="sidebarCompact"></label>
</div>
</li>
<li class="list-group-item">
Iconic
<div class="custom-control custom-switch float-right">
<input type="radio" name="sidebar" class="custom-control-input" id="sidebarIconic">
<label class="custom-control-label" for="sidebarIconic"></label>
</div>
</li>
<li class="list-group-item">
Fill Color
<div class="custom-control custom-switch float-right">
<input type="checkbox" class="custom-control-input" id="sidebarFill">
<label class="custom-control-label" for="sidebarFill"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card border-0 shadow bg-white h-100">
<div class="card-body text-center">
<i class="avatar avatar-60 md-36 material-icons bg-light-danger text-danger my-3">menu</i>
<h6 class="mb-3">Header</h6>
<div class="row">
<div class="col-12 px-0">
<ul class="list-group list-group-flush mb-0 text-left">
<li class="list-group-item">
Fixed Top
<div class="custom-control custom-switch float-right">
<input type="checkbox" class="custom-control-input" id="headerfixed">
<label class="custom-control-label" for="headerfixed"></label>
</div>
</li>
<li class="list-group-item">
Fixed Width
<div class="custom-control custom-switch float-right">
<input type="checkbox" class="custom-control-input" id="headercontainer">
<label class="custom-control-label" for="headercontainer"></label>
</div>
</li>
<li class="list-group-item">
Fill Color
<div class="custom-control custom-switch float-right">
<input type="checkbox" class="custom-control-input" id="headerfillcolor">
<label class="custom-control-label" for="headerfillcolor"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-4">
<div class="card border-0 shadow bg-white h-100">
<div class="card-body text-center">
<i class="avatar avatar-60 md-36 material-icons bg-light-success text-success my-3">subtitles</i>
<h6 class="mb-3">Content</h6>
<div class="row">
<div class="col-12 px-0">
<ul class="list-group list-group-flush mb-0 text-left">
<li class="list-group-item">
Square
<div class="custom-control custom-switch float-right">
<input type="checkbox" name="sidebar" class="custom-control-input" id="wrapperCorner">
<label class="custom-control-label" for="wrapperCorner"></label>
</div>
</li>
<li class="list-group-item">
Full Width
<div class="custom-control custom-switch float-right">
<input type="checkbox" name="sidebar" class="custom-control-input" id="contentWidth">
<label class="custom-control-label" for="contentWidth"></label>
</div>
</li>
<li class="list-group-item">
Spacious
<div class="custom-control custom-switch float-right">
<input type="checkbox" name="sidebar" class="custom-control-input" id="moderntouch">
<label class="custom-control-label" for="moderntouch"></label>
</div>
</li>
<li class="list-group-item">
Fullscreen
<div class="custom-control custom-switch float-right">
<input type="checkbox" name="sidebar" class="custom-control-input" id="fullscreen">
<label class="custom-control-label" for="fullscreen"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 pt-0">
<div class="row w-100 mx-0">
<div class="col-12 col-md-6 text-center">
<h6><i class="material-icons vm mr-1">brightness_2</i> Dark</h6>
<div class="avatar mb-1 avatar-30 bg-dark style-picker" data-target='style-black-dark'></div>
<div class="avatar mb-1 avatar-30 bg-darkblue style-picker" data-target='style-darkblue-dark'></div>
<div class="avatar mb-1 avatar-30 bg-purple style-picker" data-target='style-purple-dark'></div>
<div class="avatar mb-1 avatar-30 bg-blue style-picker" data-target='style-blue-dark'></div>
<div class="avatar mb-1 avatar-30 bg-green style-picker" data-target='style-green-dark'></div>
<div class="avatar mb-1 avatar-30 bg-pista style-picker" data-target='style-pista-dark'></div>
<div class="avatar mb-1 avatar-30 bg-orange style-picker" data-target='style-orange-dark'></div>
<div class="avatar mb-1 avatar-30 bg-tomato style-picker" data-target='style-tomato-dark'></div>
</div>
<div class="col-12 col-md-6 text-center">
<h6><i class="material-icons vm mr-1">brightness_7</i> Light</h6>
<div class="avatar mb-1 avatar-30 bg-dark style-picker" data-target='style-black-light'></div>
<div class="avatar mb-1 avatar-30 bg-darkblue style-picker" data-target='style-darkblue-light'></div>
<div class="avatar mb-1 avatar-30 bg-purple style-picker" data-target='style-purple-light'></div>
<div class="avatar mb-1 avatar-30 bg-blue style-picker" data-target='style-blue-light'></div>
<div class="avatar mb-1 avatar-30 bg-green style-picker" data-target='style-green-light'></div>
<div class="avatar mb-1 avatar-30 bg-pista style-picker" data-target='style-pista-light'></div>
<div class="avatar mb-1 avatar-30 bg-orange style-picker" data-target='style-orange-light'></div>
<div class="avatar mb-1 avatar-30 bg-tomato style-picker" data-target='style-tomato-light'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Theme style picker modal window and options ends -->
<!-- Global js mandatory -->
<script src="../assets/js/jquery-3.3.1.min.js"></script>
<script src="../assets/js/popper.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/vendor/cookie/jquery.cookie.js"></script>
<!-- Global js ends -->
<!-- Vendor or 3rd party js -->
<!-- date range picker -->
<script src="../assets/vendor/daterangepicker-master/moment.min.js"></script>
<script src="../assets/vendor/daterangepicker-master/daterangepicker.js"></script>
<!-- Vendor or 3rd party js ends -->
<!-- Customized template js mandatory -->
<script src="../assets/js/main.js"></script>
<!-- Customized template js ends -->
<!-- theme picker -->
<script src="../assets/js/style-picker.js"></script>
<!-- theme picker ends -->
<!-- Customized page level js -->
<script>
'use strict'
$(document).ready(function() {
});
</script>
<!-- Customized page level js ends -->
</body>
<!-- Body ends -->
</html>
Thanks for taking interest and purchase our template.