DreamSalon – Hair & Beauty Salon Bootstrap Template with Admin Dashboard
Welcome to DreamSalon
Official Documentation for DreamSalon – Hair & Beauty Salon Bootstrap Template with Admin Dashboard
- Item Name : DreamSalon – Hair & Beauty Salon Bootstrap Template with Admin Dashboard
- Highlights : 60+ pages, 1 dashboard
- Includes : HTML (Bootstrap v5.3.8)
- Built With : SASS
- Author : Dreams Technologies
- Support Email : support@dreamstechnologies.com
Introduction
DreamSalon is a stylish, fully responsive, and feature-rich template designed specifically for beauty salons, spas, barbershops, and wellness centers. Built with Bootstrap 5.3.x, it comes with 3 elegant homepage layouts and a powerful admin panel that includes separate dashboards for customers. The template supports RTL and offers both light and dark modes for a seamless user experience across all devices. Whether you're building a salon website or a complete appointment management system, DreamSalon provides all the tools you need in one clean, modern package.
Dashboard
Customer Dashboard – Book services, Wallet, Membership and profile management.
- Creative Design – Modern and stylish layouts with UI/UX best practices.
- Fully Responsive Design – Works perfectly on desktops, tablets, and mobiles.
- Easy Color & Font Customization – Change branding easily with SCSS variables.
- Dark, Light & RTL Supported – Full theme support including right-to-left.
- W3C Validated HTML – Clean, standard-compliant HTML structure.
- Built with Bootstrap v5.x – Stable and scalable front-end framework.
- Cross Browser Compatible – Works across Chrome, Firefox, Safari, Edge, Opera.
- Easy SCSS Variables – Customize global styles in minutes.
- Font Awesome & Tabler Icons – Includes multiple icon packs.
- Multiple Home Pages & Dashboards – Comes with multiple demos and customer dashboard.
Project Overview
The project follows a modular structure with clear separation of concerns.
html/ │ │ │ │ ├── src/ │ │ │ | │ └── assets | │ │ │ | | | └── css | | | └── style.css | | | └── js | | | └── All js Files. | | | └── img | | | └── All Images Here. | | | └── scss | | | └── All scss Files. │ │ │ └── All Html Files │
Structure Overview
DreamSalon is powered by the robust Bootstrap Framework, the most trusted front-end toolkit for developing responsive and mobile-first websites.
The following partial files have been added to the project: title-meta.html, header.html, topbar.html, sidebar.html, footer.html and script.html.
Below is sample coding structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>DreamSalon – Hair & Beauty Salon Bootstrap Template with Admin Dashboard</title>
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<header class="header">
</header>
<div class="breadcrumb-bar">
</div>
<div class="content">
<div class="container">
</div>
</div>
</div>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/slick.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Script Overview
The DreamSalon template includes a wide range of helpful JavaScript plugins designed to enhance user experience on your DreamSalon website. These plugins power features like appointment scheduling, image sliders, time pickers, and more — all tailored for beauty and wellness businesses.
You can find all the JS files organized in the js/ and plugins/ directories. Add your script inside the partials/script.html file.
<script src="assets/js/script.js"></script>
Unzip Template Files
After downloading, extract the DreamSalon package. Inside, you will find the folder HTML (Source Code), which contains all necessary files.
Copy Files to Server
Open the HTML folder, then copy all files and paste them into your localhost directory (e.g., htdocs for XAMPP, www for WAMP) or directly into your web server’s root folder.
Run in Browser
Once the files are in place, you can open the template in any modern web browser
(Chrome, Firefox, Safari, Edge) from your PC or laptop. Simply navigate to localhost/dreamsalon/index.html or www.example.com/index.html or the domain where you uploaded the template.
Prerequisites
Node.js Installation
Before installing Sass, ensure you have Node.js installed on your system:
https://nodejs.org/en/download/
Installation Steps
Install NPM Package Manager
Install the latest version of npm package manager:
npm install -g npm@latestInstall Sass Globally
Install Dart Sass globally using npm:
npm install -g sassVerify Installation
Check if Sass is installed correctly:
sass --versionUsing Scss
The core SCSS file is located at scss/main.scss, which serves as the main entry point for all style definitions. If you're looking to customize or explore individual components, you’ll find them organized within the scss/ directory.
sass --watch main.scss:../css/style.css
Quick customization of layout using scss.
You can make changes in the assets/scss/variables.scss file.
You can manage those colors to update the color theme.
--primary: #c25414;
--secondary: #3444A5;
$theme-colors: (
"primary": #c25414,
"secondary": #3444A5,
);
body {
background: $white;
}
The default font is Inter. To change the font:
Update the @import URL and the --font-family-primary, --font-family-secondary variable in style.css:
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');
// Font Family
$font-family-primary: "Oswald", sans-serif;
$font-family-secondary: "Familjen Grotesk", sans-serif;
font-family: $font-family-primary;
font-family: $font-family-secondary;The design token variables are defined in the @theme block of your CSS file. Here are the primary color tokens:
--primary: #c25414;
--success: #27AE60;
--info: #2F80ED;
--warning: #FDAF22;
--danger: #EF1E1E;Background Color Change
You can change the header background color in style.css as per your wish
.navbar-header {
background: $white;
left: 0;
position: fixed;
right: 0;
top: 0;
}If this documentation does not address your questions, please feel free to contact us via email at Item Support Page
We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.
We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.
Don’t forget to Rate DreamSalon!
DreamSalon is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.
Regular License
Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.
Extended License
For use by you or one client in a single end product for which end users may be charged.
What are the main differences between the Regular License and the Extended License?
If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.
| NAME | URL |
|---|---|
| Bootstrap | https://bootstrap.com/ |
| Tabler Icons | https://tabler.io/icons |
| Fontawesome | https://fontawesome.com/ |
| Google Fonts | https://fonts.google.com/ |
| Range-Slider | https://refreshless.com/nouislider/ |
Do you need a customized application for your business?
If you need a customized application for your business depends on your specific requirements and goals, Please contact us.
Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.
Don't Miss Out on the Benefits of Customization!
Unlock the potential of your project. It's time to ensure that your project isn't just another cookie-cutter solution but a truly unique and effective one.
Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!
- We'll tailor the application to meet your specific needs and preferences.
- We will upload your website to the server and ensure it is live.
Thank You
Thank you once again for downloading DreamSalon.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.