Introduction

Universal Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Universal Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

  • Universal Admin
    • Assets
      • Ajax
      • Css
      • Fonts
      • Images
      • Js
      • Json
      • Scss
      • Video
    • Boxes
    • Dark
    • Default
    • Document
    • Extra
    • RTL
    • Share-kit

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

Template Installation
FTP Upload:

Open up your FTP manager and connect to your hosting

Browse to required directory (Normally public_html)

Upload the files inside Main folder.

Options

Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body! Please refer the below table for corresponding classes.

Layout Options
Boxed Layout Class:
box-layout
RTL Layout class:
rtl
Light layout Attribute:
main-theme-layout="main-theme-layout-5"
Dark Page-body Attribute:
main-theme-layout="main-theme-layout-2"
Dark Page-body & Sidebar Attribute:
main-theme-layout="main-theme-layout-3"
Dark Layout Attribute:
main-theme-layout="main-theme-layout-4"
Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

Sidebar Options
Default Sidebar layout Attribute:
native-default
native scroll Attribute:
native-scroll
Bordered Navigation Attribute:
navigation-bordered
Right Side icons Attribute:
navigation-rightside
Background Image Attribute:
native-image-bg
Dark Sidebar layout Attribute:
main-theme-layout="main-theme-layout-1"
Header options

We have some inbuilt themes for header that can be switched with just a class change

Header semilight-bg-color
Light version bg-default
Primary version bg-Primary
secondary version bg-secondary
danger version bg-danger
success version bg-success
info version bg-info

Components

Basic UI Elements
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

To use another types button you have to link the related css file according to types of buttons in a head tag

Primary Secondary Success Info Warning Danger Light Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 100%"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="alert alert-primary dark" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-secondary dark" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-success dark" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-info dark" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning dark" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-danger dark" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-light dark" role="alert">
This is a dark alert—check it out!
</div>
<div class="alert alert-dark dark" role="alert">
This is a dark alert—check it out!
</div>
Dismissible popover
<button type="button" class="btn btn-primary example-popover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<a tabindex="0" class="example-popover btn btn-secondary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<button type="button" data-bs-trigger="hover" class="example-popover btn btn-success" data-bs-container="body" data-bs-toggle="popover" data-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >
On Hover Tooltip
</button>
To use java script you have to add the following script tag
<!--popover js-->
<script src="../assets/js/popover-custom.js" ></script>
<button type="button" class="example-popover btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-placement="top" title="Popover title" >
Hover Me
</button>
To use java script you have to add the following script tag
<!--tooltip js-->
<script src="../assets/js/tooltip-init.js" ></script>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

<ul class="nav nav-tabs" id="myTab3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>

<li class="nav-item">
<a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent3">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class="mb-0 m-t-30">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p class="mb-0 m-t-30">
...
</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="mb-0 m-t-30">
...
</p>
</div>
</div>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
<div id="accordion" class="default-according">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #<span class="digits">1</span>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>
Larger shadow
Larger shadow
Regular shadow
Regular shadow
small shadow
Small shadow
<h6 class="sub-title mt-0 mb-5">Larger shadow</h6>
<div class="shadow-lg p-25 shadow-showcase text-center">
<h5 class="m-0 f-18">Larger shadow</h5>
</div>
<h6 class="sub-title mb-5 mt-5">Regular shadow</h6>
<div class="shadow shadow-showcase p-25 text-center">
<h5 class="m-0 f-18">Regular shadow</h5>
</div>
<h6 class="sub-title mb-5 mt-5">small shadow</h6>
<div class="shadow-sm shadow-showcase p-25 text-center mb-5">
<h5 class="m-0 f-18">Small shadow</h5>
</div>
Advance UI Elements
To use java script you have to add the following style and script tag
<!--Scrollable css-->
<link rel="stylesheet" type="text/css" href="../assets/css/scrollable.css">

<!--scrollable js-->
<script src="../assets/js/scrollable/scrollable-custom.js" ></script>
<script src="../assets/js/scrollable/perfect-scrollbar.min.js" ></script>
To use java script you have to add the following style and script tag
<!-- Tree css -->
<link rel="stylesheet" type="text/css" href="../assets/css/tree.css">

<!-- Tree js-->
<script src="../assets/js/tree/jstree.min.js" ></script>
<script src="../assets/js/tree/tree.js" ></script>
To use java script you have to add the following script tag
<!-- bootstrap notify js -->
<script src="../assets/js/notify/bootstrap-notify.min.js" ></script>
<script src="../assets/js/notify/notify-script.js" ></script>
To use java script you have to add the following style and script tag
<!-- range slider css start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/rating.css">

<!-- Ion Range Slider js -->
<script src="../assets/js/rating/jquery.barrating.js" ></script>
<script src="../assets/js/rating/rating-script.js" ></script>
To use java script you have to add the following style and script tag
<!-- Dropzone start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/dropzone.css">

<!-- Dropzone js -->
<script src="../assets/js/dropzone/dropzone.js" ></script>
<script src="../assets/js/dropzone/dropzone-script.js" ></script>
To use java script you have to add the following style and script tag
<!-- tour js -->
<script src="../assets/js/tour/intro.js" ></script>
<script src="../assets/js/tour/intro-init.js" ></script>
To use java script you have to add the following style and script tag
<!-- Sweet alert jquery-->
<script src="../assets/js/sweet-alert/sweetalert.min.js" ></script>
<script src="../assets/js/sweet-alert/app.js" ></script>
To use java script you have to add the following css and script tag
<!-- animate css -->
<link rel="stylesheet" type="text/css" href="../assets/css/animate.css">

<!-- Modal js-->
<script src="../assets/js/modal-animated.js" ></script>
To use java script you have to add the following style and script tag
<!-- range slider css start here -->
<link rel="stylesheet" type="text/css" href="../assets/css/range-slider.css">

<!-- Ion Range Slider js -->
<script src="../assets/js/range-slider/ion.rangeSlider.min.js" ></script>
<script src="../assets/js/range-slider/rangeslider-script.js" ></script>
To use java script you have to add the following style and script tag
<!--Image cropper css-->
<link rel="stylesheet" type="text/css" href="../assets/css/image-cropper.css">

<!--Cropper jquery-->
<script src="../assets/js/image-cropper/cropper.js"></script>
<script src="../assets/js/image-cropper/cropper-main.js"></script>
To use java script you have to add the following style and script tag
<!-- sticky css -->
<link rel="stylesheet" type="text/css" href="../assets/css/sticky.css">

<!--Sticky note js-->
<script src='../assets/js/sticky/sticky.js'></script>
Animations
To use java script you have to add the following style and script tag
<!-- animate custom js -->
<script src="../assets/js/animate-custom.js" ></script>

<!-- Animate icon -->
<link rel="stylesheet" href="../assets/css/animate.css">
To use java script you have to add the following script tag
<!-- Scroll Reveal jquery-->
<script src="../assets/js/scroll-reveal/scrollreveal.min.js" ></script>
<script src="../assets/js/scroll-reveal/modernizr.js" ></script>
To use java script you have to add the following style and script tag
<!-- AOS icon -->
<link rel="stylesheet" type="text/css" href="../assets/css/aos/aos.css">

<!-- AOS js-->
<script src='../assets/js/isotope.pkgd.js'></script>
<script src="../assets/js/aos/aos.js" ></script>
<script src="../assets/js/aos/aos-init.js" ></script>
To use java script you have to add the following script tag
<!-- Tilt js-->
<script src="../assets/js/tilt/tilt.jquery.js" ></script>
<script src="../assets/js/tilt/tilt-custom.js" ></script>
To use java script you have to add the following style and script tag
<!-- WOW js-->
<script src="../assets/js/wow/wow.min.js" ></script>
<script src="../assets/js/wow/wow-init.js" ></script>
Icons

To use another types button you have to link the related css file according to types of buttons in a head tag

Forms
To use java script you have to add the following script tag
<script src="../assets/js/form-validation-custom.js" ></script>
Tables
# First Name Last Name Username Role Country
1 Alexander Orton @mdorton Admin USA
2 John Deo Deo @johndeo User USA
3 Randy Orton the Bird @twitter admin UK
4 Randy Mark Ottandy @mdothe user AUS
5 Ram Jacob Thornton @twitter admin IND
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Country</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alexander</td>
<td>Orton</td>
<td>@mdorton</td>
<td>Admin</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">2</th>
<td>John Deo</td>
<td>Deo</td>
<td>@johndeo</td>
<td>User</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Randy Orton</td>
<td>the Bird</td>
<td>@twitter</td>
<td>admin</td>
<td>UK</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Randy Mark</td>
<td>Ottandy</td>
<td>@mdothe</td>
<td>user</td>
<td>AUS</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Ram Jacob</td>
<td>Thornton</td>
<td>@twitter</td>
<td>admin</td>
<td>IND</td>
</tr>
</tbody>
</table>
</div>
To use java script you have to add the following script tag
<script src="../assets/js/form-validation-custom.js" ></script>
To use java script you have to add the following style and script tag
<!--JSGrid css-->
<link rel="stylesheet" type="text/css" href="../assets/css/datatables.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/datatable-extension.css">

<!--Datatable extension js-->
<script src="../assets/js/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.buttons.min.js"></script>
<script src="../assets/js/datatable-extension/jszip.min.js"></script>
<script src="../assets/js/datatable-extension/pdfmake.min.js"></script>
<script src="../assets/js/datatable-extension/vfs_fonts.js"></script>
<script src="../assets/js/datatable-extension/dataTables.autoFill.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.select.min.js"></script>
<script src="../assets/js/datatable-extension/buttons.print.min.js"></script>
<script src="../assets/js/datatable-extension/buttons.html5.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.bootstrap4.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.responsive.min.js"></script>
<script src="../assets/js/datatable-extension/responsive.bootstrap4.min.js"></script>
<script src="../assets/js/datatable-extension/dataTables.keyTable.min.js"></script>
<script src="../assets/js/datatable-extension/custom.js"></script>
To use java script you have to add the following script tag
<!--JSGrid css-->
<link rel="stylesheet prefetch" href="../assets/css/jsgrid.css">

<!-- JsGrid data-->
<script src="../assets/js/jsgrid/jsgrid.min.js"></script>
<script src="../assets/js/jsgrid/griddata.js"></script>
<script src="../assets/js/jsgrid/jsgrid.js"></script>
Cards
Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

<div class="card">
<div class="card-header">
<h5>Basic Card</h5>
</div>
<div class="card-body">
<p class="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
</div>
</div>
To use java script you have to add the following script tag
<!--Sortable JS-->
<script src="../assets/js/dragable/jquery-ui.min.js"></script>
<script src="../assets/js/dragable/sortable.js"></script>
<script src="../assets/js/dragable/sortable-custom.js"></script>
Timeline
To use java script you have to add the following script tag
<!-- Timeline js-->
<script src="../assets/js/timeline-v-1/main.js" ></script>
<script src="../assets/js/modernizr.js" ></script>
To use java script you have to add the following script tag
<!-- Timeline js-->
<script src="../assets/js/timeline-v-2/jquery.timeliny.min.js" ></script>
<script src="../assets/js/timeline-v-2/timeline-v-2-custom.js" ></script>
Charts
To use java script you have to add the following script tag
<!-- google Chart JS-->
<script src="../assets/js/chart/google-chart-loader.js"></script>
<script src="../assets/js/chart/google-chart.js"></script>
To use java script you have to add the following script tag
<!--Sparkline Chart JS-->
<script src="../assets/js/sparkline/sparkline.js"></script>
<script src="../assets/js/sparkline/sparkline-script.js"></script>
To use java script you have to add the following style and script tag
<!-- flot Chart JS-->
<script src="../assets/js/flot-chart/excanvas.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.time.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.symbol.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.categories.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.stack.js"></script>
<script src="../assets/js/flot-chart/flot-script.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.pie.js"></script>
<script src="../assets/js/flot-chart/jquery.flot.symbol.js"></script>
To use java script you have to add the following script tag
<!--Sparkline Chart JS-->
<script src="../assets/js/sparkline/sparkline.js"></script>
<script src="../assets/js/sparkline/sparkline-script.js"></script>
<script src="../assets/js/radial-chart-tooltip.js" ></script>
To use java script you have to add the following script tag
<!-- Morris Chart JS-->
<script src="../assets/js/morris-chart/raphael.js"></script>
<script src="../assets/js/morris-chart/morris.js"></script>
<script src="../assets/js/morris-chart/prettify.min.js"></script>
<script src="../assets/js/morris-chart/morris-script.js"></script>
To use java script you have to add the following script tag
<!-- Chart JS-->
<script src="../assets/js/chart/Chart.min.js"></script>
<script src="../assets/js/chart/chart.custom.js"></script>
To use css and java script you have to add the following style and script tag
<!-- Chartist -->
<link rel="stylesheet" type="text/css" href="../assets/css/chartist.css">

<!-- Chartist -->
<script src="../assets/js/chartis/chartist.js"></script>
<script src="../assets/js/chartis/chartist-custom.js"></script>
Maps
To use java script you have to add the following script tag
<!-- Map js-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCn9vJtX9_E8tMRatRJjWZ2OGkII0z0LHo"></script>
<script src="../assets/js/g-map/gmaps.min.js" ></script>
<script src="../assets/js/g-map/gmaps_custom.js" ></script>
To use css and java script you have to add the following style and script tag
<!--Vector Map css-->
<link rel="stylesheet" type="text/css" href="../assets/css/vector-map.css">

<!--vector map js-->
<script src="../assets/js/vector-map/jquery-jvectormap-2.0.2.min.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-world-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-us-aea-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-uk-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-au-mill.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-chicago-mill-en.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-in-mill.js"></script>
<script src="../assets/js/vector-map/map/jquery-jvectormap-asia-mill.js"></script>
<script src="../assets/js/vector-map/map-vector.js"></script>
Editors
To use css and java script you have to add the following style and script tag
<!-- Summernote css -->
<link rel="stylesheet" href="../assets/css/summernote.css">

<!--Summer-note js-->
<script src="../assets/js/summernote/summernote.js"></script>
<script src="../assets/js/summernote/summernote.custom.js"></script>
To use java script you have to add the following script tag
<!--ckeditor js-->
<script src="../assets/js/ckeditor/ckeditor.js"></script>
<script src="../assets/js/ckeditor/styles.js"></script>
<script src="../assets/js/ckeditor/adapters/jquery.js"></script>
<script src="../assets/js/ckeditor/ckeditor.custom.js"></script>
To use css and java script you have to add the following style and script tag
<!-- Simple-MDE css -->
<link rel="stylesheet prefetch" href="../assets/css/simple-mde.css">

<!-- Simple MDE editor jquery-->
<script src="../assets/js/simple-mde/simplemde.min.js"></script>
<script src="../assets/js/simple-mde/simplemde.custom.js"></script>
To use css and java script you have to add the following style and script tag
<!--ace code editor js-->
<script src="../assets/js/ace-editor/ace.js"></script>
<script src="../assets/js/ace-editor/ace-custom.js"></script>

Apps

Users
You don't need to add any additional css or js. The css and js which describe in a html page is default. Use the code of it to use it
You don't need to add any additional css or js. The css and js which describe in a html page is default. Use the code of it to use it
Calender
To use java script you have to add the following style and script tag
<!-- calendar css -->
<link rel="stylesheet" type="text/css" href="../assets/css/calendar.css">

<!--Calendar js-->
<script src="../assets/js/calendar/moment.min.js"></script>
<script src="../assets/js/calendar/fullcalendar.min.js"></script>
<script src="../assets/js/calendar/fullcalendar-custom.js"></script>
for events of calender you have to add the same css and js which are used for basic calender
for advance calender you have to add the same css and js which are used for basic calender
Gallery
To use java script you have to add the grid gallery js also following script tag
<!--Masonry gallery js-->
<script src="../assets/js/masonry-gallery.js"></script>
for this you have to add the same css and js which are used for masonry gallery
To use java script you have to add the grid gallery js also following script tag
<!-- Gallery Hover js-->
<script src="../assets/js/gallery-hover.js"></script>
Email
To use java script you have to add the following script tag
<!--Email js-->
<script src="../assets/js/email-app.js"></script>
for this you have to add the same js which are used for Email application
Blog
You don't need to add any extra css or js to add the blog code
Chat
To use java script you have to add the following script tag
<!-- Emoji css -->
<link rel="stylesheet" type="text/css" href="../assets/css/emoji.css">

<!--Chat Application Js-->
<script src="./../assets/js/chat-app/handlebars.min.js"></script>
<script src="./../assets/js/chat-app/list.min.js"></script>
<script src="./../assets/js/chat-app/chat-app-custom.js"></script>

<!--Emoji picker js-->
<script src="../assets/js/emoji/twemoji.min.js"></script>
<script src="../assets/js/emoji/jquery.lsxemojipicker.js"></script>
<script src="../assets/js/emoji/emoji-picker.js"></script>
for this you don't need to add any additional css or js
for this also you don't need any additional css or js
Support ticket
To use java script you have to add the following script tag
<script src="../assets/js/support-ticket-custom.js" ></script>
TODO
To use java script you have to add the following script tag
<!-- To-do js -->
<script src="../assets/js/todo/todo.js"></script>
Landing page
You don't ned to add any additional css or js for the landing page
Ecommerce
There is no need to add any additional css or js
There is no need to add any additional css or js
There is no need to add any additional css or js
There is no need to add any additional css or js
To use java script for print you have to add the following script tag
<!--print js-->
<script src="../assets/js/print.js"></script>
Pricing
There is no need to add any additional css or js

Builder

Page builder
To use css and java script you have to add the following style and script tag
<!-- PageBuilder css -->
<link rel="stylesheet" type="text/css" href="../assets/css/page-builder.css">

<!-- grideditor js -->
<script src="../assets/js/page-builder/jquery.grideditor.min.js"></script>
<script src="../assets/js/page-builder/page-builder-custom.js"></script>
Form builder
To use java script you have to add the following script tag
<!--Form builder js-->
<script src="../assets/js/form-builder-1/require.js"></script>
<script src="../assets/js/form-builder-1/main-built.js"></script>
To use java script you have to add the following script tag
<!--Form builder 2-->
<script src="../assets/js/form-builder-2/beautifyhtml.js"></script>
<script src="../assets/js/form-builder-2/form-builder-2.js"></script>
Button builder
To use java css and java script you have to add the following style and script tag
<!-- ButtonBuilder css -->
<link rel="stylesheet" type="text/css" href="../assets/css/button-builder.css">

<!--Button Builder-->
<script src="../assets/js/button-builder/colorpicker.js"></script>
<script src="../assets/js/button-builder/clipboard.min.js"></script>
<script src="../assets/js/button-builder/generator.js"></script>
<script src="../assets/js/button-builder/extend-1.0.js"></script>

Credits

We have used the following plugins in Serein admin