Introduction
Nice Admin admin is a popular open source WebApp template for admin dashboards and control panels. Nice Admin 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. Nice Admin 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 Nice Admin 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 Nice Admin admin, you will be entitled to free download of all future updates for the same license.
- Author: Wrappixel / Nirav Joshi
- Contact: http://wrappixel.com/support/
- website: http://wrappixel.com/
NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.
Support does include:
- 1) Answering your questions or problems regarding the template.
- 2) Giving solution to the Bugs reported.
- 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 installfrom 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 Nice Admin 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.md1. 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 copyto 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.jsfile and you can find the option like this:
You can find app.init.jsfile from here:
dist/js/app.init.jsTheme: 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:truein 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 / overlayHow to apply Full Sidebar ?
For Full sidebar, you can change SidebarType: 'full'.
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlayHow 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 / overlayHow 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 / overlayHow 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: truein place of BoxedLayout: false.
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )For the Horizontal Demo Version
You can find app.init.horizontal.jsfile from here:
dist/js/app.init.horizontal.js
For Horizontal sidebar, you can change Layout: 'horizontal'.
Theme: false, // this can be true or false ( true means dark and false means light ), Layout: 'horizontal', LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6 NavbarBg: 'skin1', // 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: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6 SidebarPosition: false, // it can be true / false ( true means Fixed and false means absolute ) HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute ) 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.jsfile 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:truein 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 blue color of sidebar
SidebarColor: 'skin1' //To apply blue color of sidebarTo apply orange color of sidebar
SidebarColor: 'skin2' //To apply orange color of sidebarTo apply cyan color of sidebar
SidebarColor: 'skin3' //To apply cyan color of sidebarTo apply purple color of sidebar
SidebarColor: 'skin4' //To apply purple color of sidebarTo apply black color of sidebar
SidebarColor: 'skin5' //To apply black color of sidebarTo apply gray color of sidebar
SidebarColor: 'skin6' //To apply gray color of sidebarHow to Change Navbar Color?
To change a navbar color, choose any of the following options.
To apply blue color of navbar
NavbarBg: 'skin1' //To apply blue color of navbarTo apply orange color of navbar
NavbarBg: 'skin2' //To apply orange color of navbarTo apply cyan color of navbar
NavbarBg: 'skin3' //To apply cyan color of navbarTo apply purple color of navbar
NavbarBg: 'skin4' //To apply purple color of navbarTo apply black color of navbar
NavbarBg: 'skin5' //To apply black color of navbarTo apply gray color of navbar
NavbarBg: 'skin6' //To apply gray color of navbarHow to Change Logo Background Color?
To change a logo background color, choose any of the following options.
To apply blue background-color of logo
LogoBg: 'skin1' //To apply blue background-color of logoTo apply orange background-color of logo
LogoBg: 'skin2' //To apply orange background-color of logoTo apply cyan background-color of logo
LogoBg: 'skin3' //To apply cyan background-color of logoTo apply purple background-color of logo
LogoBg: 'skin4' //To apply purple background-color of logoTo apply black background-color of logo
LogoBg: 'skin5' //To apply black background-color of logoTo apply gray background-color of logo
LogoBg: 'skin6' //To apply gray background-color of logoFolder Structure
we follow simple structure for the template
Nice Admin admin | | | |── html | └── ltr/ | └── All HTML Files | | └── rtl/ | └── All HTML Files | | └── horizontal/ | └── 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 | | | └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 availableJavaScript 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 availableJavaScript 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 availableJavaScript 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 availableJavaScript 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 availableJavaScript Files
<script src="../../assets/libs/gaugeJS/dist/gauge.min.js" type="text/javascript"></script>gmaps
CSS Files
css not availableJavaScript Files
<script src="../../assets/libs/gmaps/dist/gmaps.min.js" type="text/javascript"></script>inputmask
CSS Files
css not availableJavaScript Files
<script src="../../assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js" type="text/javascript"></script>jquery
CSS Files
css not availableJavaScript Files
<script src="../../assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>jquery.flot.tooltip
CSS Files
css not availableJavaScript Files
<script src="../../assets/libs/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>jquery.repeater
CSS Files
css not availableJavaScript Files
<script src="../../assets/libs/jquery.repeater/js/jquery.repeater.min.js" type="text/javascript"></script>jquery-asColor
CSS Files
css not availableJavaScript 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 availableJavaScript Files
<script src="../../assets/libs/jquery-asGradient/dist/jquery-asGradient.min.js" type="text/javascript"></script>jquery-sessiontimeout
CSS Files
css not availableJavaScript 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 availableJavaScript 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 availableJavaScript Files
<script src="../../assets/libs/masonry-layout/dist/masonry.pkgd.min.js" type="text/javascript"></script>moment
CSS Files
css not availableJavaScript 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 availableJavaScript 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 availableJavaScript 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 availableJavaScript 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 availableJavaScript 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 availableJavaScript Files
<script src="../../assets/libs/typeahead.js/dist/typeahead.jquery.min.js" type="text/javascript"></script>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>Nice Admin 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/logo-icon.png" alt="homepage" class="dark-logo" /> <!-- Light Logo icon --> <img src="../../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> </b> <!--End Logo icon --> <!-- Logo text --> <span class="logo-text"> <!-- dark Logo text --> <img src="../../assets/images/logo-text.png" alt="homepage" class="dark-logo" /> <!-- Light Logo text --> <img src="../../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /> </span> </a> <!-- ============================================================== --> <!-- 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"> <!-- User Profile--> <li> <!-- User Profile--> <div class="user-profile d-flex no-block dropdown m-t-20"> <div class="user-pic"><img src="../../assets/images/users/1.jpg" alt="users" class="rounded-circle" width="40" /></div> <div class="user-content hide-menu m-l-10"> <a href="javascript:void(0)" class="" id="Userdd" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <h5 class="m-b-0 user-name font-medium">Steave Jobs <i class="fa fa-angle-down"></i></h5> <span class="op-5 user-email">varun@gmail.com</span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="Userdd"> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-user m-r-5 m-l-5"></i> My Profile</a> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-wallet m-r-5 m-l-5"></i> My Balance</a> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-email m-r-5 m-l-5"></i> Inbox</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-settings m-r-5 m-l-5"></i> Account Setting</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-power-off m-r-5 m-l-5"></i> Logout</a> </div> </div> </div> <!-- End User Profile--> </li> <li class="p-15 m-t-10"><a href="javascript:void(0)" class="btn btn-block create-btn text-white no-block d-flex align-items-center"><i class="fa fa-plus-square"></i> <span class="hide-menu m-l-5">Create New</span> </a></li> <!-- User Profile--> <li class="nav-small-cap"><i class="ti-more-alt"></i> <span class="hide-menu">Personal</span></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-speedometer"></i><span class="hide-menu">Dashboard </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="index.html" class="sidebar-link"><i class="far fa-circle"></i><span class="hide-menu"> Minimal </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="ti-palette"></i><span class="hide-menu">Ui Elements </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="ui-cards.html" class="sidebar-link"><i class="ti-layers-alt"></i><span class="hide-menu"> Cards</span></a></li> <li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><i class="ti-layout-menu"></i><span class="hide-menu"> Buttons</span></a></li> <li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><i class="ti-layout-slider-alt"></i><span class="hide-menu"> Modals</span></a></li> <li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><i class="ti-layout-tab-min"></i><span class="hide-menu"> Tab</span></a></li> <li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><i class="ti-pin2"></i><span class="hide-menu"> Tooltip & Popover</span></a></li> <li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><i class="ti-alert"></i><span class="hide-menu"> Notification</span></a></li> <li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><i class="ti-layout-list-post"></i><span class="hide-menu"> Progressbar</span></a></li> <li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><i class="ti-more-alt"></i><span class="hide-menu"> Typography</span></a></li> <li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><i class="ti-rocket"></i><span class="hide-menu"> Bootstrap Ui</span></a></li> <li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><i class="icon-directions"></i><span class="hide-menu"> Breadcrumb</span></a></li> <li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><i class="icon-grid"></i><span class="hide-menu"> List Media</span></a></li> <li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><i class="ti-layout-grid3-alt"></i><span class="hide-menu"> Grid</span></a></li> <li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><i class="ti-layout-slider"></i><span class="hide-menu"> Carousel</span></a></li> </ul> </li> <li class="nav-small-cap"><i class="ti-more-alt"></i> <span class="hide-menu">Forms & Tables</span></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-layout-media-right-alt"></i><span class="hide-menu">Forms</span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="form-basic.html" class="sidebar-link"><i class="ti-file"></i><span class="hide-menu"> Basic Forms</span></a></li> <li class="sidebar-item"><a href="form-layout.html" class="sidebar-link"><i class="ti-files"></i><span class="hide-menu"> Form Layouts</span></a></li> <li class="sidebar-item"><a href="form-validation.html" class="sidebar-link"><i class="icon-info"></i><span class="hide-menu"> Form Validation</span></a></li> <li class="sidebar-item"><a href="form-elements.html" class="sidebar-link"><i class="ti-layers"></i><span class="hide-menu"> Form Elements</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="ti-layout-accordion-merged"></i><span class="hide-menu">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="ti-widgetized"></i><span class="hide-menu"> Basic Tables</span></a></li> </ul> </li> <li class="nav-small-cap"><i class="ti-more-alt"></i> <span class="hide-menu">Sample Pages</span></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-files"></i><span class="hide-menu">Sample Pages </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="starter-kit.html" class="sidebar-link"><i class="ti-layout-width-default"></i> <span class="hide-menu">Starter Kit</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="ti-id-badge"></i><span class="hide-menu">Authentication</span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="pages-login.html" class="sidebar-link"><i class="ti-shift-left"></i><span class="hide-menu"> Login </span></a></li> <li class="sidebar-item"><a href="pages-register.html" class="sidebar-link"><i class="ti-marker-alt"></i><span class="hide-menu"> Register</span></a></li> <li class="sidebar-item"><a href="pages-lockscreen.html" class="sidebar-link"><i class="icon-lock"></i><span class="hide-menu"> Lockscreen</span></a></li> <li class="sidebar-item"><a href="pages-recover-password.html" class="sidebar-link"><i class="icon-lock-open"></i><span class="hide-menu"> Recover password</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="ti-pie-chart"></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="ti-stats-up"></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-chart-areaspline"></i><span class="hide-menu"> Chartjs</span></a></li> <li class="sidebar-item"><a href="chart-sparkline.html" class="sidebar-link"><i class="icon-graph"></i><span class="hide-menu"> Sparkline Chart</span></a></li> <li class="sidebar-item"><a href="chart-chartist.html" class="sidebar-link"><i class="ti-stats-down"></i><span class="hide-menu"> Chartis 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="ti-light-bulb"></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="icon-social-reddit"></i> <span class="hide-menu"> Material Icons </span></a></li> <li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><i class="ti-github"></i><span class="hide-menu"> Fontawesome Icons</span></a></li> <li class="sidebar-item"><a href="icon-themify.html" class="sidebar-link"><i class="ti-themify-logo"></i><span class="hide-menu"> Themify Icons</span></a></li> <li class="sidebar-item"><a href="icon-weather.html" class="sidebar-link"><i class="ti-shine"></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="icon-emotsmile"></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="ti-flag"></i><span class="hide-menu"> Flag Icons</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="ti-align-left"></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="ti-align-left"></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="ti-align-left"></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="ti-align-left"></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="ti-list-ol"></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="ti-list-ol"></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="ti-list-ol"></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="ti-list-ol"></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="ti-align-left"></i><span class="hide-menu"> item 1.4</span></a></li> </ul> </li> <li class="nav-small-cap"><i class="ti-more-alt"></i> <span class="hide-menu">Extra</span></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="../documentation/documentation.html" aria-expanded="false"><i class="ti-pencil-alt"></i><span class="hide-menu">Documentation</span></a></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="pages-login.html" aria-expanded="false"><i class="far fa-circle"></i><span class="hide-menu">Log Out</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"> <div class="row"> <div class="col-5 align-self-center"> <h4 class="page-title">Starter Page</h4> <div class="d-flex align-items-center"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> </div> </div> <div class="col-7 align-self-center"> <div class="d-flex no-block justify-content-end align-items-center"> <div class="m-r-10"> <div class="lastmonth"></div> </div> <div class=""><small>LAST MONTH</small> <h4 class="text-info m-b-0 font-medium">$58,256</h4></div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Container fluid --> <!-- ============================================================== --> <div class="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"> © 2018 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.scssWe have used google fonts for the template you can change whatever font you wish
// Variables @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800'); $font-family-sans-serif: 'Nunito Sans', sans-serif !default;scss & css
Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it
@import 'variable'; //Theme colors @import 'theme-colors/dark-theme'; // Import Bootstrap source files @import "bootstrap/bootstrap"; //This is for the components @import 'components'; @import 'pages'; //This is for the widgets @import 'widgets/widgets'; //This is for the responsive @import 'responsive'; //In This scss you can write your scss @import 'custom'; //This is for the icons @import 'icons/font-awesome/css/fontawesome-all.css'; @import 'icons/simple-line-icons/css/simple-line-icons.css'; @import 'icons/weather-icons/css/weather-icons.min.css'; @import 'icons/themify-icons/themify-icons.css'; @import 'icons/flag-icon-css/flag-icon.min.css'; @import "icons/material-design-iconic-font/css/materialdesignicons.min.css";
Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Nice Admin admin comes it does not affect your code.
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.
Card
Below is the basic card structure.
<div class="card"> <div class="card-header"> Title <div class="card-actions"> <a class="" data-action="collapse"><i class="ti-minus"></i></a> <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a> <a class="btn-close" data-action="close"><i class="ti-close"></i></a> </div> </div> <div class="card-body collapse show"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div>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>
|
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>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
|
Form
Below is the basic form structure.
<form> <div class="form-group"> <label for="exampleInputEmail1">User Name</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username"> </div> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password"> </div> <div class="form-group"> <div class="checkbox checkbox-success"> <input id="checkbox1" type="checkbox"> <label for="checkbox1"> Remember me </label> </div> </div> <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button> <button type="submit" class="btn btn-dark waves-effect waves-light">Cancel</button> </form>Table
Below is the basic table structure.
<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Deshmukh</td> <td>Prohaska</td> <td>@Genelia</td> <td><span class="label label-danger">admin</span> </td> </tr> <tr> <td>2</td> <td>Deshmukh</td> <td>Gaylord</td> <td>@Ritesh</td> <td><span class="label label-info">member</span> </td> </tr> <tr> <td>3</td> <td>Sanghani</td> <td>Gusikowski</td> <td>@Govinda</td> <td><span class="label label-warning">developer</span> </td> </tr> <tr> <td>4</td> <td>Roshan</td> <td>Rogahn</td> <td>@Hritik</td> <td><span class="label label-success">supporter</span> </td> </tr> <tr> <td>5</td> <td>Joshi</td> <td>Hickle</td> <td>@Maruti</td> <td><span class="label label-info">member</span> </td> </tr> <tr> <td>6</td> <td>Nigam</td> <td>Eichmann</td> <td>@Sonu</td> <td><span class="label label-success">supporter</span> </td> </tr> </tbody> </table>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-style-switcher.js
|
It contains the customizer functions apply to the theme by clicking on customizer panel. |
app.init.horizontal.js
|
You can modify the settings of horizontal demo. |
app-style-switcher.horizontal.js
|
It contains the customizer functions apply to the horizontal 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.jsto dashboard10.js
|
This is for all dashboards setting. |
Credits to the third party Plugins
For more details (customizations) you can find third party app from here:
Free support
If you have any type of query or support needed, please open a support ticket here: wrappixel.com/support/
Thank you
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Default Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<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>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 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>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, teland color)
<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@example.com"> </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/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/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
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.
Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
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.
Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
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.
Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
<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 | 2018/05/01 |
|
| Closed | AdminX Theme Side Menu Open OnClick | 1234251 | Nirav Joshi | 2018/05/11 |
|
| Opened | Admin-Pro Theme Side Menu Open OnClick | 1020345 | Vishal Bhatt | 2018/04/01 |
|
| In Pending | Elegant Theme Side Menu Open OnClick | 7810203 | Eric Pratt | 2018/01/01 |
|
| Closed | AdminX Theme Side Menu Open OnClick | 2103450 | Nirav Joshi | 2018/05/01 |
|
| Completed | Admin-Pro Theme Side Menu Open OnClick | 2140530 | Vishal Bhatt | 2018/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>2018/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>2018/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>2018/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>2018/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>2018/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>2018/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>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 documentationfrom 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>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
<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:danielkristeen@gmail.com">danielkristeen@gmail.com</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 no-border"> <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>