Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 19/July/2024
By: Sean Ngu
If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question via Wrapbootstrap. Thanks so much!
When you only need to include Droplet 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 gulp // generate plugins command gulp plugins
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 Droplet
template_html/ ├── 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 Droplet Admin Template. The css / js files can be found via /dist/assets/
folder.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Droplet</title> <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"> </head> <body> <div id="app" class="app"> <!-- app-header --> <header id="header" class="app-header">... </header> <!-- app-sidebar --> <sidebar id="sidebar" class="app-sidebar">... </sidebar> <button class="app-sidebar-mobile-backdrop" data-toggle-target=".app" data-toggle-class="app-sidebar-mobile-toggled"></button> <!-- app-content --> <div id="content" class="app-content">...</div> <!-- btn-scroll-top --> <a href="#" data-toggle="scroll-to-top" class="btn-scroll-top fade"> <i class="fa fa-arrow-up"></i> </a> </div> <!-- BEGIN core-js --> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script> </body> </html>
All the css files used in Droplet 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.
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.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/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 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.
vendor.min.js
app.min.js
<!-- 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/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>
Pace Loading Bar at Top
<body class="pace-top"> ... </body>
Boxed Layout
<body class="pace-top"> <div id="app" class="app app-boxed-layout"> ... </div> </body>
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>
To apply the dark mode to the entire page, you can add the data-bs-theme="dark"
attribute to the HTML tag. This attribute will change the background and text colors of the entire page to dark mode.
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> <head> <meta charset="UTF-8"> <title>Dark Mode Example</title> </head> <body> <!-- your page content here --> </body> </html>
With this example, the data-bs-theme="dark"
attribute is added to the html tag. This will apply the dark mode to the entire page.
OR
If you want to apply dark mode to a single component only, you can add the data-bs-theme="dark"
attribute to that component.
<div class="card" data-bs-theme="dark"> <div class="card-body"> <!-- your component content here --> </div> </div>
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:
gulp cssThis 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
Dark Mode Variables
The /src/_variables-dark.scss
file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/_variables.scss
file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/_variables-dark.scss
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos