Bootstrap 5 responsive admin template

documented by Sean Ngu

Updated on: 20/November/2022
By: Sean Ngu

Thank you for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

When you only need to include Studio compiled CSS or JS, below is the required core css and javascript.

<!-- Core CSS -->
<link href="assets/css/vendor.min.css" rel="stylesheet" />
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- Core JS -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>

If you wish to configure the scss files settings, follow the following step to install gulp in your operating system.
You may refer to their official documentation for how to setup the development environment.
Setup Guide

cd /your-path-url/template_html/
npm install 

// generate plugins command
gulp plugins

Make sure that you are running at least node 16.x and npm 6.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

File structure overview for Studio

├── dist/             // generated html / css / js files
├── gulpfile.js       // gulp settings
├── package.json      // npm package installed
└── src/
    ├── html/         // html source files
    ├── img/          // image source files
    ├── js/           // javascript source files
    └── scss/         // studio scss files

Below is the general page structure and the required core css / js files for Studio Admin Template. The css / js files can be found via /dist/assets/ folder.

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
        name="viewport" />
  <!-- core-css -->
  <link href="assets/css/vendor.min.css" rel="stylesheet" />
  <link href="assets/css/app.min.css" rel="stylesheet" />
  <div id="app" class="app">
    <!-- app-header -->
    <header id="header" class="app-header">... </header>
    <!-- app-sidebar -->
    <sidebar id="sidebar" class="app-sidebar">... </sidebar>
    <!-- app-content -->
    <div id="content" class="app-content">...</div>
    <!-- btn-scroll-top -->
    <a href="#" data-click="scroll-top" class="btn-scroll-top fade"><i class="fa fa-arrow-up"></i></a>
  <!-- BEGIN core-js -->
  <script src="assets/js/vendor.min.js"></script>
  <script src="assets/js/app.min.js"></script>

All the css files used in Studio has been compiled into two files app.min.css and vendor.min.css by using gulp. If you are not using gulp, copy over the folder /dist/assets/css and /dist/assets/webfonts into your application assets folder.

  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  1. Bootstrap
  2. Studio Core CSS
<!-- core-css -->
<link href="assets/css/vendor.min.css" rel="stylesheet" />
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- OR without vendor.min.css -->
<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/animate.css/animate.min.css" rel="stylesheet" />
<link href="assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" />
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- core-css required folder -->

This theme compiles 6 javascript library into two files app.min.js and vendor.min.js by using gulp. If you are not using gulp, copy over the folder /dist/assets/js into your application assets folder.

  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Slimscroll
  6. JavaScript Cookie
  1. Studio Core Javascript
<!-- core-js -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>

<!-- OR without vendor.min.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/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/js-cookie/src/js.cookie.js"></script>
<script src="assets/js/app.min.js"></script>

<!-- core-js required folder -->

Sidebar minified:

<div id="app" class="app app-sidebar-minified">

Full height:

<div id="app" class="app app-content-full-height">
  <div id="content" class="app-content" data-scrollbar="true" data-height="100%" 

Full width:

<div id="app" class="app app-content-full-width">

Fixed footer:

<div id="app" class="app app-footer-fixed">
  <div id="footer" class="app-footer">
    © 2022 seanTheme All Right Reserved

Boxed Layout

<body class="app-with-bg">
  <div id="app" class="app app-boxed-layout">

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

jQuery Plugins

  1. ApexCharts: https://apexcharts.com/
  2. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
  3. Bootstrap: http://getbootstrap.com/
  4. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  5. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  6. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  7. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  8. Bootstrap Table: https://bootstrap-table.com/
  9. Chart.js: https://chartjs.org
  10. DataTables: https://datatables.net/
  11. FontAwesome: https://fontawesome.com/
  12. Fullcalendar: https://fullcalendar.io/
  13. jQuery: https://jquery.com/
  14. jQuery Typeahead: http://www.runningcoder.org/jquerytypeahead/
  15. jQuery UI: https://jqueryui.com/
  16. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  17. Javascript Cookie: https://github.com/js-cookie/js-cookie
  18. jVectormap: http://jvectormap.com/
  19. Tag-It: http://aehlke.github.io/tag-it/
  20. Selectpicker: https://picker.uhlir.dev/
  21. Spectrum: https://seballot.github.io/spectrum/
  22. kbw-countdown: https://github.com/kbwood/countdown
  23. moment: http://momentjs.com/
  24. Pace: https://github.com/HubSpot/pace
  25. Perfect Scrollbar: https://perfectscrollbar.com/
  26. PhotoSwipe: https://photoswipe.com/
  27. Popper.js: https://popper.js.org/
  28. Summernote: https://github.com/summernote/summernote


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


  1. Flaticon: https://www.flaticon.com/