Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 05/July/2024
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
When you only need to include Quantum 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="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script> <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 webpack
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 npm run dev // generate production css / js npm run build
Make sure that you are running at least node 20.x
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.
File structure overview for Quantum
template/ ├── dist/ // generated HTML, CSS, and JS files ├── webpack.app.js // webpack settings for the application ├── webpack.config.js // main webpack configuration file ├── webpack.vendor.js // webpack settings for vendor libraries ├── package.json // npm package configurations └── src/ ├── data/ // JSON data files ├── html/ // HTML source files ├── img/ // image source files ├── js/ // JavaScript source files └── scss/ // SCSS source files
Below is the general page structure and the required core css / js files for Quantum Admin Template. The css / js files can be found via /dist/assets/
folder.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Quantum</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="" /> <meta name="author" content="" /> <!-- ================== BEGIN core-css ================== --> <link href="assets/css/vendor.min.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> </head> <body> <!-- BEGIN #loader --> <div id="loader" class="app-loader">... </div> <!-- END #loader --> <div id="app" class="app"> <!-- app-header --> <div id="header" class="app-header">... </div> <!-- app-sidebar --> <div id="sidebar" class="app-sidebar">... </div> <!-- mobile-sidebar-backdrop --> <button class="app-sidebar-mobile-backdrop" data-toggle-target=".app" data-toggle-class="app-sidebar-mobile-toggled"></button> <!-- END mobile-sidebar-backdrop --> <!-- app-content --> <div id="content" class="app-content">...</div> <!-- app-theme-panel --> <div id="content" class="app-content">...</div> <!-- btn-scroll-top --> <a href="#" data-toggle="scroll-to-top" class="btn-scroll-top fade">...</a> </div> <!-- BEGIN core-js --> <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script> </body> </html>
All the css files used in Quantum has been compiled into two files app.min.css
and vendor.min.css
by using webpack. If you are not using webpack, copy over the folder /dist/assets/css
and /dist/assets/webfonts
into your application assets folder.
vendor.min.css
app.min.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/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" /> <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- core-css required folder --> /dist/assets/css /dist/assets/webfonts
This theme compiles 5 javascript library into two files app.min.js
and vendor.min.js
by using webpack. If you are not using webpack, copy over the folder /dist/assets/js
into your application assets folder.
vendor.min.js
app.min.js
<!-- core-js --> <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script> <!-- OR without vendor.min.js --> <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.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.min.js"></script> <script src="assets/js/app.min.js"></script> <!-- core-js required folder --> /dist/assets/js
Sidebar collapsed:
<div id="app" class="app app-sidebar-collapsed"> ... </div>
Full height:
<div id="app" class="app app-content-full-height"> ... <div id="content" class="app-content" data-scrollbar="true" data-height="100%" data-skip-mobile="true"> ... </div> </div>
Full width:
<div id="app" class="app app-content-full-width"> ... </div>
Fixed footer:
<div id="app" class="app app-footer-fixed"> ... <div id="footer" class="app-footer"> © 2024 seanTheme All Right Reserved </div> </div>
Boxed Layout
<div id="app" class="app app-boxed-layout"> ... </div>
Top Nav (without Sidebar)
<div id="app" class="app app-with-top-nav app-without-sidebar"> ... </div>
Top Nav (with Sidebar)
<div id="app" class="app app-with-top-nav"> ... </div>
Boxed Layout with Top Nav & Sidebar
<div id="app" class="app app-with-top-nav app-boxed-layout"> ... </div>
Add the theme class 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-white">...</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>
To enable RTL mode, follow these steps:
/src/_variables.scss
file in your code editor.$enable-rtl
variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
app.min.css
file:
npm run buildThis will regenerate the app.min.css file with the changes you made to the
$enable-rtl
variable.
Global Variables
The /src/_variables.scss
file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/_variables.scss
file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos