Documentation

Color Admin

“Default Flat Design” Documentation by “Sean Ngu” v6.0.0

Updated on: 25/August/2026
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!

A) HTML Structure - top

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 #appHeader -->
  <div id="appHeader" class="app-header"></div>
  <!-- BEGIN #appHeader -->
  
  <!-- 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 -->

B) Page Head - top

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>

C) Header - top

Top menu structure:

<!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <a href="index.html" class="brand-logo"><span class="brand-icon"></span> <b>Color</b> Admin</a>
    <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-mobile-toggled" data-toggle-target=".app">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <!-- END brand -->
  <!-- BEGIN header-nav -->
  <div class="menu">
    <div class="menu-item menu-item-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="menu-item menu-profile dropdown">
      <a href="#" class="menu-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 #appHeader -->

D) Sidebar - top

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

E) Page Content - top

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

F) Panel Box - top

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

G) End of Page (Javascript) - top

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>

H) Page Theme Options - top

Add the theme to the <body> tag in order to change the theme color.

Available Theme Options

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

I) Dark Mode - top

Add the data-bs-theme="dark" attribute to <html> in order to enable the dark mode.

<html data-bs-theme="dark">

J) RTL Mode - top

Add the dir="rtl" attribute to <html> in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

K) Page Options - top

Here is the general structure for the each case of page options.

Page Without Sidebar

<!-- BEGIN #app -->
<div id="app" class="app app-without-sidebar">
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar">
  <!-- END #sidebar -->

Page With Two Sidebar

<!-- BEGIN #app -->
<div id="app" class="app app-with-two-sidebar">
  <!-- 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 app-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 -->

Page Without Header

<!-- BEGIN #app -->
<div id="app" class="app app-without-header">
  ...

Top Navigation Default

<!-- BEGIN #app -->
<div id="app" class="app">
  <!-- BEGIN #appHeader -->
  <div id="appHeader" class="app-header">

Top Navigation Fixed

<!-- BEGIN #app -->
<div id="app" class="app app-header-fixed">
  <!-- BEGIN #appHeader -->
  <div id="appHeader" class="app-header">

Top Navigation Dark Mode

<!-- BEGIN #app -->
<div id="app" class="app">
  <!-- BEGIN #appHeader -->
  <div id="appHeader" class="app-header" data-bs-theme="dark">

Sidebar Default

<!-- BEGIN #app -->
<div id="app" class="app">
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar" data-bs-theme="dark">
    ...
  </div>
  <div class="app-sidebar-bg" data-bs-theme="dark"></div>
  <!-- END #sidebar -->

Sidebar Fixed

<!-- BEGIN #app -->
<div id="app" class="app app-sidebar-fixed">
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar" data-bs-theme="dark">

Sidebar Minified

<!-- BEGIN #app -->
<div id="app" class="app app-sidebar-minified">
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar" data-bs-theme="dark">

Sidebar Position Right

<!-- BEGIN #app -->
<div id="app" class="app app-with-end-sidebar">
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar" data-bs-theme="dark">

Sidebar Grid Styling

<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar app-sidebar-grid" data-bs-theme="dark">

Sidebar Gradient Styling NEW

<!-- BEGIN #app -->
<div id="app" class="app app-gradient-enabled">

Full Height Page / Table Column Page NEW

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

Remove Page Loader

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

L) Using Gulp SCSS - top

Installation

Run the following commands from the Gulp source directory to install dependencies and compile the SCSS. 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
npx gulp

<!-- available command -->
npx gulp plugins       // generate plugins

<!-- available theme command -->
npx gulp               // default theme
npx gulp material      // material theme
npx gulp apple         // apple theme
npx gulp transparent   // transparent theme
npx gulp facebook      // facebook theme
npx gulp google        // google theme

Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Gulp compilation

Gulp combines the required JavaScript and CSS assets into generated vendor files, which simplifies deployment and reduces the number of requests. 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({debug: true}, (details) => {
  console.log(`${details.name}: ${details.stats.originalSize}`);
  console.log(`${details.name}: ${details.stats.minifiedSize}`);
}))
.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/'+ theme +'/styles.scss'
])
.pipe(insert.prepend('$enable-rtl: '+ rtl +';\n'))
.pipe(uglify())
.pipe(sass({ includePaths: ['node_modules'] }).on('error', sass.logError))
.pipe(concat('app'+ ((rtl == 'true') ? '-rtl' : '') +'.min.css'))
.pipe(autoprefixer())
.pipe(minifyCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(distPath + '/assets/css/'+ theme +'/'))
.pipe(livereload());

Below is the list of plugins that compile into vendor.min.js.

return gulp.src([
  '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(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(rename('app.min.js'))
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload());

Gulp & SCSS file structure

To change the color theme or primary color, edit the relevant _variables.scss file. Use npm to update dependencies when needed.

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
    │   ├── _ui.scss
    │   ├── _utilities.scss
    │   ├── _variables-dark.scss
    │   ├── _variables.scss
    │   ├── styles.scss
    │   ├── app/
    │   ├── images/
    │   ├── layout/
    │   ├── mixins/
    │   ├── pages/
    │   ├── plugins/
    │   └── ui/
    ├── apple/
    ├── facebook/
    ├── material/
    ├── transparent/
    └── google/

M) Plugins & Resources - top

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 app.min.css & vendor.min.js

Official Link:
http://getbootstrap.com/
FontAwesome

FontAwesome has been included in vendor.min.css

Official Link:
https://fontawesome.com/
Animate.css

Animate.css has been included in vendor.min.css

Official Link:
http://daneden.github.io/animate.css/
jQuery

jQuery has been included in vendor.min.js

Official Link:
http://jquery.com/
jQuery UI

jQuery UI has been included in vendor.min.css & vendor.min.js

Official Link:
http://jqueryui.com/
Perfect Scrollbar

Perfect Scrollbar has been included in vendor.min.css & vendor.min.js

Official Link:
https://mdbootstrap.com/freebies/perfect-scrollbar/
JS Cookie

JS Cookie has been included in app.min.js

Official Link:
https://github.com/js-cookie/js-cookie
Bootstrap Icons

Required CSS File

<link href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />

Official Link:
https://icons.getbootstrap.com/
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:
http://jvectormap.com/
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:
http://www.flotcharts.org/
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:
https://fullcalendar.io/
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:
https://github.com/jboesch/Gritter
Masonry

Required JS File

<script src="../assets/plugins/masonry-layout/dist/masonry.pkgd.min.js"></script>

Official Link:
https://masonry.desandro.com/
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:
http://lokeshdhakar.com/projects/lightbox2/
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:
https://uxsolutions.github.io/bootstrap-datepicker/
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:
https://github.com/jdewit/bootstrap-timepicker
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:
https://seballot.github.io/spectrum/
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:
http://aehlke.github.io/tag-it/
Masked Input

Required JS File

<script src="../assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>

Official Link:
https://github.com/excellalabs/jquery.maskedinput
Parsley Validation

Required JS File

<script src="../assets/plugins/parsleyjs/dist/parsley.min.js"></script>

Official Link:
http://parsleyjs.org/
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:
https://github.com/Waxolunist/bootstrap3-wysihtml5-bower
CKEditor

Required JS File

<script src="../assets/plugins/ckeditor/ckeditor.js"></script>

Official Link:
http://ckeditor.com/
Sparkline

Required JS File

<script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>

Official Link:
http://omnipotent.net/jquery.sparkline/
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:
http://www.datatables.net/

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:
http://ionden.com/a/plugins/ion.rangeSlider/en.html
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:
http://countdownjs.org/
Zurb Email Template

Official Link:
https://foundation.zurb.com/emails/email-templates.html
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:
http://abpetkov.github.io/switchery/
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:
http://abpetkov.github.io/powerange/
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:
http://vitalets.github.io/x-editable/
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:
http://blueimp.github.io/jQuery-File-Upload/
jQuery-Knob

Required JS File

<script src="../assets/plugins/jquery-knob/dist/jquery.knob.min.js"></script>

Official Link:
https://github.com/aterrien/jQuery-Knob
Simple Line Icons

Required CSS File

<link rel="stylesheet" href="../assets/plugins/simple-line-icons/css/simple-line-icons.css" />

Official Link:
https://thesabbir.github.io/simple-line-icons
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:
https://github.com/seyDoggy/superbox
Chart JS

Required JS File

<script src="../assets/plugins/chart.js/dist/Chart.min.js"></script>

Official Link:
http://www.chartjs.org/
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:
http://www.jstree.com/
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:
https://github.com/dangrossman/bootstrap-daterangepicker
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:
https://select2.github.io/
Flag Icon

Required CSS File

<link href="../assets/plugins/flag-icon-css/css/flag-icons.min.css" rel="stylesheet" />

Official Link:
https://github.com/lipis/flag-icon-css
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:
http://eonasdan.github.io/bootstrap-datetimepicker/
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:
http://nvd3.org/
Boostrap Social

Required CSS File

<link href="../assets/plugins/bootstrap-social/bootstrap-social.css" rel="stylesheet" />

Official Link:
https://lipis.github.io/bootstrap-social/
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:
http://introjs.com/
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:
http://www.dropzonejs.com/
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:
http://summernote.org/
SweetAlert

Required JS File

<script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></script>

Official Link:
https://sweetalert.js.org/
clipboard.js

Required JS File

<script src="../assets/plugins/clipboard/dist/clipboard.min.js"></script>

Official Link:
https://clipboardjs.com/
Highlight JS

Required JS File

<script src="../assets/plugins/@highlightjs/cdn-assets/highlight.min.js"></script>

Official Link:
https://highlightjs.org/
Apex Chart

Required JS File

<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

Official Link:
https://apexcharts.com/
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:
http://sorgalla.com/lity/
Ionicons

Required JS File

<!-- No additional icon script is required. -->

Official Link:
https://ionicons.com/
jQuery Mockjax

Required JS File

<script src="../assets/plugins/jquery-mockjax/dist/jquery.mockjax.min.js"></script>

Official Link:
https://github.com/jakerella/jquery-mockjax
jQuery Migrate

Required JS File

<script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script>

Official Link:
https://github.com/jquery/jquery-migrate
AngularJS

Required JS File

<script src="../assets/plugins/angular/angular.min.js"></script>

Official Link:
http://angularjs.org/
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:
https://ui-router.github.io/
Angular UI Bootstrap

Required JS File

<script src="../assets/plugins/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

Official Link:
http://angular-ui.github.io/bootstrap/
Angular oclazyload

Required JS File

<script src="../assets/plugins/ocLazyLoad/dist/ocLazyLoad.min.js"></script>

Official Link:
https://oclazyload.readme.io

N) References - top

I've used the following images, icons or other files as listed.

jQuery Plugins

  1. Angular 22:https://angular.dev/
  2. Angular JS:http://angularjs.org/
  3. Angular UI Router:https://ui-router.github.io/
  4. Angular UI Bootstrap:http://angular-ui.github.io/bootstrap/
  5. Apex Chart:https://apexcharts.com/
  6. Animate.css:http://daneden.github.io/animate.css/
  7. ASP.NET:https://learn.microsoft.com/en-us/aspnet/core/
  8. Bootstrap:http://getbootstrap.com/
  9. Bootstrap Icons:https://icons.getbootstrap.com/
  10. Bootstrap Datepicker:https://uxsolutions.github.io/bootstrap-datepicker/
  11. Bootstrap Timepicker:http://jdewit.github.io/bootstrap-timepicker/
  12. Bootstrap Social:https://lipis.github.io/bootstrap-social/
  13. Bootstrap Datetimepicker:http://eonasdan.github.io/bootstrap-datetimepicker/
  14. Bootstrap Daterangepicker:https://github.com/dangrossman/bootstrap-daterangepicker
  15. Bootstrap WYSIHTML5:https://github.com/Waxolunist/bootstrap3-wysihtml5-bower
  16. Chart JS:http://www.chartjs.org/
  17. CKEditor:http://ckeditor.com/
  18. Clipboard:https://clipboardjs.com/
  19. DataTables:https://www.datatables.net/
  20. Dropzone:http://www.dropzonejs.com/
  21. Django:https://www.djangoproject.com/
  22. FontAwesome:https://fontawesome.com/
  23. Fullcalendar:https://fullcalendar.io/
  24. Flot chart:http://www.flotcharts.org/
  25. Flag Icon:https://github.com/lipis/flag-icon-css
  26. Gritter:https://github.com/jboesch/Gritter
  27. Highlight.js:https://highlightjs.org/
  28. Iconify:https://iconify.design/
  29. Ionicons:https://ionicons.com/
  30. Ion Range Slider:http://ionden.com/a/plugins/ion.rangeSlider/en.html
  31. Intro.js:http://introjs.com/
  32. jQuery:http://jquery.com/
  33. jQuery UI:http://jqueryui.com/
  34. jQuery slimScroll:http://rocha.la/jQuery-slimScroll
  35. jQuery File Upload:http://blueimp.github.io/jQuery-File-Upload/
  36. jQuery Knob:https://github.com/aterrien/jQuery-Knob
  37. jVectormap:http://jvectormap.com/
  38. jQuery Mockjax:https://github.com/jakerella/jquery-mockjax
  39. jQuery Migrate:https://github.com/jquery/jquery-migrate
  40. jQuery Countdown:http://countdownjs.org/
  41. JS Cookie:https://github.com/js-cookie/js-cookie
  42. JS Tree:http://www.jstree.com/
  43. Laravel:https://laravel.com/
  44. Lity:http://sorgalla.com/lity/
  45. Lightbox 2:http://lokeshdhakar.com/projects/lightbox2/
  46. Masked Input:https://github.com/excellalabs/jquery.maskedinput
  47. Masonry:https://masonry.desandro.com/
  48. Morris Chart:http://morrisjs.github.io/morris.js/index.html
  49. Nvd3:http://nvd3.org/
  50. NextJS:https://nextjs.org/
  51. oclazyload:https://oclazyload.readme.io
  52. Parsley Validation:http://parsleyjs.org/
  53. Powerange:http://abpetkov.github.io/powerange/
  54. React.js:https://react.dev/
  55. Selectpicker:https://picker.uhlir.dev/
  56. Spectrum:https://seballot.github.io/spectrum/
  57. Summernote:http://summernote.org/
  58. Superbox:https://github.com/seyDoggy/superbox
  59. SweetAlert:https://sweetalert.js.org/
  60. Select 2:https://select2.github.io/
  61. Switchery:http://abpetkov.github.io/switchery/
  62. Sparkline:http://omnipotent.net/jquery.sparkline/
  63. Simple Line Icons:https://thesabbir.github.io/simple-line-icons
  64. Svelte:https://svelte.dev/
  65. Tag It:http://aehlke.github.io/tag-it/
  66. Vue.js:https://vuejs.org/
  67. X-editable:http://vitalets.github.io/x-editable/
  68. Zurb Email Templates:https://foundation.zurb.com/emails/email-templates.html

Photos

  1. Unsplash: https://unsplash.com/
  2. Freepik: https://freepik.com/
undefined undefined