“Default Flat Design” Documentation by “Sean Ngu” v5.4.1
Updated on: 27/July/2024
By: Sean Ngu
If you have any inquiries or require further assistance beyond what is covered in this help file,
please do not hesitate to send us a message
through Wrapbootstrap. We are more than happy to help.
Thank you very much!
This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.
<!-- BEGIN #loader -->
<div id="loader" class="app-loader">
<span class="spinner"></span>
</div>
<!-- END #loader -->
<!-- BEGIN #app -->
<div id="app" class="app app-header-fixed app-sidebar-fixed ">
<!-- BEGIN #header -->
<div id="header" class="app-header"></div>
<!-- BEGIN #header -->
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" data-bs-theme="dark">
<!-- BEGIN scrollbar -->
<div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
...
</div>
<!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->
<!-- BEGIN #content -->
<div id="content" class="app-content"></div>
<!-- END #content -->
<!-- BEGIN theme-panel -->
<div class="theme-panel"></div>
<!-- END theme-panel -->
<!-- BEGIN scroll-top-btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top"
data-toggle="scroll-to-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- END scroll-top-btn -->
</div>
<!-- END #app -->
Page head contains metadata, javascript and css files:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Color Admin | Default Design</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- ================== BEGIN core-css ================== --> <link href="../assets/css/vendor.min.css" rel="stylesheet" /> <link href="../assets/css/default/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> <!-- OR without vendor.min.css --> <!-- ================== BEGIN core-css ================== --> <link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" /> <link href="../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link href="../assets/css/default/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> </head> <body>
Top menu structure:
<!-- BEGIN #header -->
<div id="header" class="app-header">
<!-- BEGIN navbar-header -->
<div class="navbar-header">
<a href="index.html" class="navbar-brand"><span class="navbar-logo"></span> <b>Color</b> Admin</a>
<button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- END navbar-header -->
<!-- BEGIN header-nav -->
<div class="navbar-nav">
<div class="navbar-item navbar-form">
<form action="" method="POST" name="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter keyword" />
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
...
<div class="navbar-item navbar-user dropdown">
<a href="#" class="navbar-link dropdown-toggle d-flex align-items-center"
data-bs-toggle="dropdown">
<img src="../assets/img/user/user-13.jpg" alt="" />
<span>
<span class="d-none d-md-inline">Adam Schwartz</span>
<b class="caret"></b>
</span>
</a>
<div class="dropdown-menu dropdown-menu-end me-1">
...
</div>
</div>
</div>
<!-- END header-nav -->
</div>
<!-- END #header -->
Sidebar structure:
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" data-bs-theme="dark">
<!-- BEGIN scrollbar -->
<div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
<!-- BEGIN menu -->
<div class="menu">
<div class="menu-header"> Navigation</div>
<div class="menu-item has-sub active">
<a href="javascript:;" class="menu-link">
<div class="menu-icon"><i class="fa fa-th-large"> </i></div>
<div class="menu-text"> Dashboard</div>
<div class="menu-caret"> </div>
</a>
<div class="menu-submenu">
<div class="menu-item active">
<a href="index.html" class="menu-link">
<div class="menu-text"> Dashboard v1</div>
</a>
</div>
...
</div>
</div>
...
<!-- BEGIN minify-button -->
<div class="menu-item d-flex">
<a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify">
<i class="fa fa-angle-double-left"></i>
</a>
</div>
<!-- END minify-button -->
</div>
<!-- END menu -->
</div>
<!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"> </div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"> </a>
</div>
<!-- END #sidebar -->
Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:
<!-- BEGIN #content -->
<div id="content" class="app-content">
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
<li class="breadcrumb-item active">Blank Page</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
<!-- END page-header -->
<!-- Page Content Here -->
</div>
<!-- END #content -->
Widget Box used for separate the content clearly by section.
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Panel Title here</h4>
<div class="panel-heading-btn">
<a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand">
<i class="fa fa-expand"></i>
</a>
<a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload">
<i class="fa fa-repeat"></i>
</a>
<a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse">
<i class="fa fa-minus"></i>
</a>
<a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="panel-body">
Panel Content Here
</div>
</div>
<!-- END panel -->
Javascript files loaded in the end of page. This will reduce page load time.
<!-- ================== BEGIN core-js ================== --> <script src="../assets/js/vendor.min.js"></script> <script src="../assets/js/app.min.js"></script> <!-- ================== END core-js ================== --> <!-- OR without vendor.min.js --> <!-- ================== BEGIN core-js ================== --> <script src="../assets/plugins/pace-js/pace.min.js"></script> <script src="../assets/plugins/jquery/dist/jquery.min.js"></script> <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="../assets/plugins/js-cookie/dist/js.cookie.js"></script> <script src="../assets/js/app.min.js"></script> <!-- ================== END core-js ================== --> </body> </html>
Add the theme to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
Add the data-bs-theme="dark" attribute to <html> in order to enable the dark mode.
<html data-bs-theme="dark">
Here is the general structure for the each case of page options.
<!-- BEGIN #app --> <div id="app" class="app app-without-sidebar"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar"> <!-- END #sidebar -->
<!-- BEGIN #app -->
<div id="app" class="app app-sidebar-two">
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" data-bs-theme="dark">
...
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"> </a>
</div>
<!-- END #sidebar -->
<!-- BEGIN #sidebar-right -->
<div id="sidebar-right" class="app-sidebar app-sidebar-end" data-bs-theme="dark">
...
</div>
<div class="app-sidebar-bg sidebar-end" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop app-sidebar-end">
<a href="#" data-dismiss="app-sidebar-end-mobile" class="stretched-link"> </a>
</div>
<!-- END #sidebar-right -->
<!-- BEGIN #app --> <div id="app" class="app app-without-header"> ...
<!-- BEGIN #app --> <div id="app" class="app"> <!-- BEGIN #header --> <div id="header" class="app-header">
<!-- BEGIN #app --> <div id="app" class="app app-header-fixed"> <!-- BEGIN #header --> <div id="header" class="app-header">
<!-- BEGIN #app --> <div id="app" class="app"> <!-- BEGIN #header --> <div id="header" class="app-header" data-bs-theme="dark">
<!-- BEGIN #app -->
<div id="app" class="app">
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" data-bs-theme="dark">
...
</div>
<div class="sidebar-bg" data-bs-theme="dark"></div>
<!-- END #sidebar -->
<!-- BEGIN #app --> <div id="app" class="app app-sidebar-fixed"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar" data-bs-theme="dark">
<!-- BEGIN #app --> <div id="app" class="app app-sidebar-minified"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar" data-bs-theme="dark">
<!-- BEGIN #app --> <div id="app" class="app app-with-end-sidebar"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar" data-bs-theme="dark">
<!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar app-sidebar-grid" data-bs-theme="dark">
<!-- BEGIN #app --> <div id="app" class="app app-gradient-enabled">
<!-- BEGIN #app -->
<div id="app" class="app app-content-full-height">
<!-- BEGIN #content -->
<div id="content" class="app-content p-0">
<div class="overflow-hidden h-100">
<div data-scrollbar="true" data-height="100%" data-skip-mobile="true"
class="app-content-padding">
...
</div>
</div>
</div>
<!-- END #content -->
</div>
<!-- END #app -->
If you wish to remove the page loading animation, you just need to remove the #loader from #app
from
<!-- BEGIN #loader --> <div id="loader" class="app-loader"> <span class="spinner"></span> </div> <!-- END #loader -->
Below is the command that required to run / compile the scss with gulpjs. If you are new to the gulpjs, you may refer to their official website for installation guide.
<!-- run the following command --> cd /your-path-url/admin/src/ npm install gulp <!-- available command --> gulp plugins // generate plugins <!-- available theme command --> gulp // default theme gulp material // material theme gulp apple // apple theme gulp transparent // transparent theme gulp facebook // facebook theme gulp google // google theme
Verify that you are running at least node 20.x.x or later and npm 10.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
To enable the RTL Support, you might need to change the following variable from admin/src/scss/default/_variables.scss.
<!-- LINE 222 --> $enable-rtl: true; <!-- run the command to regenerate the /css/default/app.min.css --> gulp
We are using gulp to compile & combine few plugins js & css into one single file for js & css. This may help to improve the speed for page load if compare to multiple files loading in one page.
If you wish to edit the included plugins files, you may refer to the /admin/src/gulpfile.js.
Below is the list of plugins that compile into vendor.min.css.
return gulp.src([
'node_modules/animate.css/animate.min.css',
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
'node_modules/jquery-ui-dist/jquery-ui.min.css',
'node_modules/pace-js/themes/black/pace-theme-flash.css',
'node_modules/perfect-scrollbar/css/perfect-scrollbar.css'
])
.pipe(sass())
.pipe(concat('vendor.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/'))
.pipe(livereload());
Below is the code that compile Color Admin scss with Bootstrap scss into app.min.css.
return gulp.src([
'scss/default/styles.scss'
])
.pipe(sass())
.pipe(concat('app.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/default/'))
.pipe(livereload());
Below is the list of plugins that compile into vendor.min.js.
'node_modules/pace-js/pace.min.js',
'node_modules/jquery/dist/jquery.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
'node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js',
'node_modules/js-cookie/dist/js.cookie.js'
])
.pipe(sourcemaps.init())
.pipe(concat('vendor.min.js'))
.pipe(sourcemaps.write())
.pipe(uglify())
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload());
Below is the code that compile Color Admin js file into app.min.js.
return gulp.src([
'js/app.js',
])
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(uglify())
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload());
To change the color theme / primary color, you may refer to the _variables.scss and set the variable. Npm can be used to update the plugins version as well.
admin/src/
├── gulpfile.js
├── package.json
├── js/
└── scss/
├── default/
│ ├── _app.scss
│ ├── _functions.scss
│ ├── _helper.scss
│ ├── _layout.scss
│ ├── _mixins.scss
│ ├── _pages.scss
│ ├── _plugins.scss
│ ├── _root.scss
│ ├── _reboot.scss
│ ├── _rtl.scss
│ ├── _ui.scss
│ ├── _variables-dark.scss
│ ├── _variables.scss
│ ├── styles.scss
│ ├── app/
│ ├── images/
│ ├── layout/
│ ├── mixins/
│ ├── pages/
│ ├── plugins/
│ └── ui/
├── apple/
├── facebook/
├── material/
├── transparent/
└── google/
Below is the list of all plugins and external resources used to power this template.
| Name | CSS Files |
|---|---|
| Bootstrap 5 |
Bootstrap 5 has been included in Official Link: |
| FontAwesome |
FontAwesome has been included in Official Link: |
| Animate.css |
Animate.css has been included in Official Link: |
| jQuery |
jQuery has been included in Official Link: |
| jQuery UI |
jQuery UI has been included in Official Link: |
| Perfect Scrollbar |
Perfect Scrollbar has been included in Official Link: |
| JS Cookie |
JS Cookie has been included in Official Link: |
| Bootstrap Icons |
Required CSS File <link href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> Official Link: |
| jvectormap |
Required CSS File <link href="../assets/plugins/jvectormap-next/jquery-jvectormap.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/jvectormap-next/jquery-jvectormap.min.js"></script> <script src="../assets/plugins/jvectormap-next/jquery-jvectormap-world-mill.js"></script> Official Link: |
| flot charts |
Required JS File <script src="../assets/plugins/flot/source/jquery.canvaswrapper.js"></script> <script src="../assets/plugins/flot/source/jquery.colorhelpers.js"></script> <script src="../assets/plugins/flot/source/jquery.flot.js"></script> <script src="../assets/plugins/flot/source/jquery.flot.saturated.js"></script> <script src="../assets/plugins/flot/source/jquery.flot.browser.js"></script> <script src="../assets/plugins/flot/source/jquery.flot.drawSeries.js"></script> <script src="../assets/plugins/flot/source/jquery.flot.uiConstants.js"></script> Official Link: |
| fullcalendar |
Required CSS File <link href="../assets/plugins/@fullcalendar/common/main.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fullcalendar/daygrid/main.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fullcalendar/timegrid/main.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fullcalendar/list/main.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fullcalendar/bootstrap/main.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/moment/min/moment.min.js"></script> <script src="../assets/plugins/@fullcalendar/core/main.global.js"></script> <script src="../assets/plugins/@fullcalendar/daygrid/main.global.js"></script> <script src="../assets/plugins/@fullcalendar/timegrid/main.global.js"></script> <script src="../assets/plugins/@fullcalendar/interaction/main.global.js"></script> <script src="../assets/plugins/@fullcalendar/list/main.global.js"></script> <script src="../assets/plugins/@fullcalendar/bootstrap/main.global.js"></script> Official Link: |
| Gritter |
Required CSS File <link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css" /> Required JS File <script src="../assets/plugins/gritter/js/jquery.gritter.js"></script> Official Link: |
| Masonry |
Required JS File <script src="../assets/plugins/masonry-layout/dist/masonry.pkgd.min.js"></script> Official Link: |
| Lightbox 2 |
Required CSS File <link rel="stylesheet" href="../assets/plugins/lightbox2/dist/css/lightbox.css" /> Required JS File <script src="../assets/plugins/lightbox2/dist/js/lightbox.min.js"></script> Official Link: |
| Bootstrap Datepicker |
Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" /> Required JS File <script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script> Official Link: |
| Bootstrap Timepicker |
Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" /> Required JS File <script src="../assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script> Official Link: |
| Spectrum |
Required CSS File <link rel="stylesheet" href="../assets/plugins/spectrum-colorpicker2/dist/spectrum.min.css" /> Required JS File <script src="../assets/plugins/spectrum-colorpicker2/dist/spectrum.min.js"></script> Official Link: |
| Tag It |
Required CSS File <link rel="stylesheet" href="../assets/plugins/tag-it/css/jquery.tagit.css" /> Required JS File <script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script> <script src="../assets/plugins/tag-it/js/tag-it.min.js"></script> Official Link: |
| Masked Input |
Required JS File <script src="../assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script> Official Link: |
| Parsley Validation |
Required JS File <script src="../assets/plugins/parsleyjs/dist/parsley.min.js"></script> Official Link: |
| Bootstrap Wysihtml5 |
Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css" /> Required JS File <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script> Official Link: |
| CKEditor |
Required JS File <script src="../assets/plugins/ckeditor/ckeditor.js"></script> Official Link: |
| Sparkline |
Required JS File <script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script> Official Link: |
| DataTables |
Required CSS File <link rel="stylesheet" href="../assets/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css" /> Required JS File <script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script> <script src="../assets/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script> Official Link: Extension: - Buttons<link rel="stylesheet" href="../assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script> <script src="../assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script> <script src="../assets/plugins/pdfmake/build/pdfmake.min.js"></script> <script src="../assets/plugins/pdfmake/build/vfs_fonts.js"></script> <script src="../assets/plugins/jszip/dist/jszip.min.js"></script>- colReorder <link rel="stylesheet" href="../assets/plugins/datatables.net-colreorder-bs5/css/colreorder.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-colreorder/js/dataTables.colreorder.min.js"></script> <script src="../assets/plugins/datatables.net-colreorder-bs5/js/colreorder.bootstrap5.min.js"></script>- fixedColumns <link rel="stylesheet" href="../assets/plugins/datatables.net-fixedcolumns-bs5/css/fixedcolumns.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-fixedcolumns/js/dataTables.fixedcolumns.min.js"></script> <script src="../assets/plugins/datatables.net-fixedcolumns-bs5/js/fixedcolumns.bootstrap5.min.js"></script>- fixedHeader <link rel="stylesheet" href="../assets/plugins/datatables.net-fixedheader-bs5/css/fixedheader.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-fixedheader/js/dataTables.fixedheader.min.js"></script> <script src="../assets/plugins/datatables.net-fixedheader-bs5/js/fixedheader.bootstrap5.min.js"></script>- keyTable <link rel="stylesheet" href="../assets/plugins/datatables.net-keytable-bs5/css/keytable.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-keytable/js/dataTables.keytable.min.js"></script> <script src="../assets/plugins/datatables.net-keytable-bs5/js/keytable.bootstrap5.min.js"></script>- Responsive <link rel="stylesheet" href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script> <script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>- rowReorder <link rel="stylesheet" href="../assets/plugins/datatables.net-rowreorder-bs5/css/rowreorder.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-rowreorder/js/dataTables.rowreorder.min.js"></script> <script src="../assets/plugins/datatables.net-rowreorder-bs5/js/rowreorder.bootstrap5.min.js"></script>- scroller <link rel="stylesheet" href="../assets/plugins/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-scroller/js/dataTables.scroller.min.js"></script> <script src="../assets/plugins/datatables.net-scroller-bs5/js/scroller.bootstrap5.min.js"></script>- select <link rel="stylesheet" href="../assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" /> <script src="../assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script> <script src="../assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script> |
| Ion Range Slider |
Required CSS File <link rel="stylesheet" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css" /> Required JS File <script src="../assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script> Official Link: |
| jQuery Countdown |
Required CSS File <link rel="stylesheet" href="../assets/plugins/countdown/jquery.countdown.css" /> Required JS File <script src="../assets/plugins/countdown/jquery.plugin.min.js"></script> <script src="../assets/plugins/countdown/jquery.countdown.min.js"></script> Official Link: |
| Zurb Email Template |
Official Link: |
| Switchery |
Required CSS File <link rel="stylesheet" href="../assets/plugins/switchery/switchery.min.css" /> Required JS File <script src="../assets/plugins/switchery/switchery.min.js"></script> Official Link: |
| Powerange |
Required CSS File <link rel="stylesheet" href=".../assets/plugins/abpetkov-powerange/dist/powerange.min.css" /> Required JS File <script src="../assets/plugins/abpetkov-powerange/dist/powerange.min.js"></script> Official Link: |
| X-Editable |
Required CSS File <link href="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.css" rel="stylesheet" /> <link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css" rel="stylesheet" /> <link href="../assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css" rel="stylesheet" /> <link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" /> <link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet" /> <link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" /> Required JS File <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script> <script src="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script> <script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.js"></script> <script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js"></script> <script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/typeaheadjs.js"></script> <script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/wysihtml5/wysihtml5.js"></script> <script src="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script> <script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <script src="../assets/plugins/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"></script> <script src="../assets/plugins/select2/dist/js/select2.full.min.js"></script> <script src="../assets/plugins/jquery-mockjax/dist/jquery.mockjax.min.js"></script> <script src="../assets/plugins/moment/min/moment.min.js"></script> Official Link: |
| jQuery File Upload |
Required CSS File <link href="../assets/plugins/blueimp-gallery/css/blueimp-gallery.min.css" rel="stylesheet" /> <link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload.css" rel="stylesheet" /> <link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script> <script src="../assets/plugins/blueimp-tmpl/js/tmpl.js"></script> <script src="../assets/plugins/blueimp-load-image/js/load-image.all.min.js"></script> <script src="../assets/plugins/blueimp-canvas-to-blob/js/canvas-to-blob.js"></script> <script src="../assets/plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.iframe-transport.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-process.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-image.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-audio.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-video.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-validate.js"></script> <script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-ui.js"></script> Official Link: |
| jQuery-Knob |
Required JS File <script src="../assets/plugins/jquery-knob/dist/jquery.knob.min.js"></script> Official Link: |
| Simple Line Icons |
Required CSS File <link rel="stylesheet" href="../assets/plugins/simple-line-icons/css/simple-line-icons.css" /> Official Link: |
| Superbox |
Required CSS File <link href="../assets/plugins/superbox/superbox.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/superbox/jquery.superbox.min.js"></script> Official Link: |
| Chart JS |
Required JS File <script src="../assets/plugins/chart.js/dist/Chart.min.js"></script> Official Link: |
| JS Tree |
Required CSS File <link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/jstree/dist/jstree.min.js"></script> Official Link: |
| Bootstrap Date Range Picker |
Required CSS File <link href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/moment/min/moment.min.js"></script> <script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> Official Link: |
| Select 2 |
Required CSS File <link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/select2/dist/js/select2.min.js"></script> Official Link: |
| Flag Icon |
Required CSS File <link href="../assets/plugins/flag-icon-css/css/flag-icons.min.css" rel="stylesheet" /> Official Link: |
| Bootstrap DateTime Picker |
Required CSS File <link href="../assets/plugins/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> Official Link: |
| Nvd3 |
Required CSS File <link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/d3/d3.min.js"></script> <script src="../assets/plugins/nvd3/build/nv.d3.js"></script> Official Link: |
| Boostrap Social |
Required CSS File <link href="../assets/plugins/bootstrap-social/bootstrap-social.css" rel="stylesheet" /> Official Link: |
| Intro JS |
Required CSS File <link href="../assets/plugins/intro.js/minified/introjs.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/intro.js/minified/intro.min.js"></script> Official Link: |
| Dropzone |
Required CSS File <link href="../assets/plugins/dropzone/dist/min/dropzone.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/dropzone/dist/min/dropzone.min.js"></script> Official Link: |
| Summernote |
Required CSS File <link href="../assets/plugins/summernote/dist/summernote-lite.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/summernote/dist/summernote-lite.min.js"></script> Official Link: |
| SweetAlert |
Required JS File <script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></script> Official Link: |
| clipboard.js |
Required JS File <script src="../assets/plugins/clipboard/dist/clipboard.min.js"></script> Official Link: |
| Highlight JS |
Required JS File <script src="../assets/plugins/@highlightjs/cdn-assets/highlight.min.js"></script> Official Link: |
| Apex Chart |
Required JS File <script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script> Official Link: |
| Lity |
Required CSS File <link href="../assets/plugins/lity/dist/lity.min.css" rel="stylesheet" /> Required JS File <script src="../assets/plugins/lity/dist/lity.min.js"></script> Official Link: |
| Ionicons |
Required JS File <script src="../assets/plugins/ionicons/dist/ionicons/ionicons.js"></script> Official Link: |
| jQuery Mockjax |
Required JS File <script src="../assets/plugins/jquery-mockjax/dist/jquery.mockjax.min.js"></script> Official Link: |
| jQuery Migrate |
Required JS File <script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script> Official Link: |
| AngularJS |
Required JS File <script src="../assets/plugins/angular/angular.min.js"></script> Official Link: |
| Angular UI Router |
Required JS File <script src="../assets/plugins/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="../assets/plugins/angular-ui-router/release/stateEvents.min.js"></script> Official Link: |
| Angular UI Bootstrap |
Required JS File <script src="../assets/plugins/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script> Official Link: |
| Angular oclazyload |
Required JS File <script src="../assets/plugins/ocLazyLoad/dist/ocLazyLoad.min.js"></script> Official Link: |
I've used the following images, icons or other files as listed.
jQuery Plugins