Please wait...

Introduction

Dashtic - Bootstrap 5 Webapp Responsive Dashboard Simple Admin Panel Premium HTML5 Template

Dashtic - Bootstrap Webapp Responsive Dashboard Simple Admin Panel Premium HTML5 Template, bootstrap form template, bootstrap templates, responsive web design, bootstrap website templates with awesome responsive Webdesign. It is suitable for all kinds of Admin templates. It is specially designed for all categories, Admin, Admin Template, Dashboard, Responsive, Admin Dashboard, Bootstrap, bootstrap 5, Clean, Backend, Jquery, Modern, Web App, Admin Panel, Ui, Premium Admin Templates, Flat, Admin Theme, Ui Kit, Bootstrap Admin, Responsive Admin, Application, Template, Admin Themes, Dashboard Template, directory.

It is easy to customize CSS & HTML, easy to create any type of Admin Template. It has beautiful index Pages and useful inner pages, and all the important sections required by any Admin Template. It is also available more widgets and Advanced Form Elements etc..

Once you purchase Dashtic - Bootstrap Webapp Responsive Dashboard Simple Admin Panel Premium HTML5 Template, bootstrap form template, bootstrap templates, responsive web design, bootstrap website templates you will get a free download of all future updates.

Thank you for purchasing our admin template. We have a dedicated team to provide you the best support. If you want any queries please feel free to contact us on live chat or email: support@spruko.com

If You Love Our Template Design Please don't forgot to rate it. Thank you so much!

Support Does Include
  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.
Support Does Not Include
  • Customization Work.
  • Any Installation Work.
  • Support for any Third Party Plugins / Software.
NOTE A single license can be used only for one domain or client. We hope you will follow the rules as it will help us to continue supporting our template and providing free future updates.

Features

  • 5 Styles Of Index Pages
  • 145+ HTML Pages
  • bootstrap 5 Framework
  • Well Commented Code
  • 24 * 7 Company Support
  • Regular Updates
  • 60+ Plugins
  • Maps List
  • Vertical Scrollbar
  • Select2
  • Multiple Blog Pages
  • Form Elements
  • FormAdvanced Elements
  • Typography Page
  • Lockscreen Page
  • Error Page
  • Under Construction Page
  • Cookies
  • User Profile
  • Easy to customize
  • Google Fonts
  • More Widgets
  • Data Tables
  • Login popup Page
  • Invoice Pages
  • Pricing Tables
  • Very Easy to Create your Own Site
  • Neat, clean and simple design
  • W3C Validated

Installation

If You are Not using Scss & gulp No need to install It.You can directly use css files.


Just Follow Simple Steps

Dashtic comes with the power of SCSS. The CSS files can be generated from SCSS by simply follow the below steps::

Prerequisites

Please follow the below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

    Just Follow Simple Steps to Install Node.js
    • Install Node.js and NPM: You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js..
    • Download npm Packages: You can do this by running npm install from the base of your project to install all the necessary dependencies.
  • Gulp

    Gulp is a JavaScipt streaming task runner. It automates many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows us to easily compilation of scss to css. You can read it more about it here.

    Make sure to have the Gulp installed & running on your computer. If you already have installed gulp on your computer, you can skip this step. To install gulp follow the below steps

    Just Follow Simple Steps to Install gulp
    • just run command npm install -g gulp from your terminal.
    • You Can Know More about gulp from here https://gulpjs.com/
    • Install gulp globally npm install --global gulp-cli
    • Install the gulp package in your devDependencies npm install --save-dev gulp
  • Install npm dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all the required dependencies in the node_modules folder. After you finished with the above steps, you can run the command to compile scss into css: gulp

LTR Gulp Commands
Command Description
gulp Runs the project locally, starts the development server, and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp watch In this template gulp watch command is for any changes to the source file scss folder i.e (.scss) are made, the watch command will run an appropriate task. All the CSS files under assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
gulp dark In this template gulp dark command is for the changes is made in the assets/css/dark.scss file. dark.scss will be watched and whatever changes have made in the the dark.scss file is automatically updated in the assets/css/dark.css file
gulp boxed In this template gulp boxed command is for the changes is made in the assets/css/boxed.scss file. boxed.scss will be watched and whatever changes have made in the boxed.scss file is automatically updated in the assets/css/boxed.css file
gulp dark-boxed In this template gulp dark-boxed command is for the changes is made in the assets/css/dark-boxed.scss file. dark-boxed.scss will be watched and whatever changes have made in the dark-boxed.scss file is automatically updated in the assets/css/dark-boxed.css file
gulp skins In this template gulp skins command is for the changes is made in the assets/css/skins.scss file. skin.scss will be watched and whatever changes have made in the skins.scss file is automatically updated in the assets/css/skins.css file
gulp menu In this template gulp menu command is for the changes is made in the assets/css/sidemenu.scss file. sidemenu.scss will be watched and whatever changes have made in the sidemenu.scss file is automatically updated in the assets/css/sidemenu.css file
gulp menu2 In this template gulp menu2 command is for the changes is made in the assets/css/sidemenu2.scss file. sidemenu2.scss will be watched and whatever changes have made in the sidemenu2.scss file is automatically updated in the assets/css/sidemenu2.css file
gulp menu3 In this template gulp menu3 command is for the changes is made in the assets/css/sidemenu3.scss file. sidemenu3.scss will be watched and whatever changes have made in the sidemenu3.scss file is automatically updated in the assets/css/sidemenu3.css file
gulp menu4 In this template gulp menu4 command is for the changes is made in the assets/css/sidemenu4.scss file. sidemenu4.scss will be watched and whatever changes have made in the sidemenu4.scss file is automatically updated in the assets/css/sidemenu4.css file
gulp closed In this template gulp closed command is for the changes is made in the assets/css/closed-sidemenu.scss file. closed-sidemenu.scss will be watched and whatever changes have made in the closed-sidemenu.scss file is automatically updated in the assets/css/closed-sidemenu.css file
gulp beautify In this template gulp beautify command is for it beautify all .css files in assets/css/ folder
RTL Gulp Commands
Command Description
gulp watch-rtl In this template gulp watch-rtl command is for any changes to the source file scss folder i.e (.scss) are made, the watch command will run an appropriate task. All the CSS files under assets/css-rtl/ folder will be watched and upon changes made to these files, the styles task will be executed.
gulp dark-rtl In this template gulp dark-rtl command is for the changes is made in the assets/css-rtl/dark.scss file. dark.scss will be watched and whatever changes have made in the the dark.scss file is automatically updated in the assets/css-rtl/dark.css file
gulp boxed-rtl In this template gulp boxed-rtl command is for the changes is made in the assets/css-rtl/boxed.scss file. boxed.scss will be watched and whatever changes have made in the boxed.scss file is automatically updated in the assets/css-rtl/boxed.css file
gulp dark-boxed-rtl In this template gulp dark-boxed-rtl command is for the changes is made in the assets/css-rtl/dark-boxed.scss file. dark-boxed.scss will be watched and whatever changes have made in the dark-boxed.scss file is automatically updated in the assets/css-rtl/dark-boxed.css file
gulp skins-rtl In this template gulp skins-rtl command is for the changes is made in the assets/css-rtl/skins.scss file. skin.scss will be watched and whatever changes have made in the skins.scss file is automatically updated in the assets/css-rtl/skins.css file
gulp menu-rtl In this template gulp menu-rtl command is for the changes is made in the assets/css-rtl/sidemenu.scss file. sidemenu.scss will be watched and whatever changes have made in the sidemenu.scss file is automatically updated in the assets/css-rtl/sidemenu.css file
gulp menu2-rtl In this template gulp menu2-rtl command is for the changes is made in the assets/css-rtl/sidemenu2.scss file. sidemenu2.scss will be watched and whatever changes have made in the sidemenu2.scss file is automatically updated in the assets/css-rtl/sidemenu2.css file
gulp menu3-rtl In this template gulp menu3-rtl command is for the changes is made in the assets/css-rtl/sidemenu3.scss file. sidemenu3.scss will be watched and whatever changes have made in the sidemenu3.scss file is automatically updated in the assets/css-rtl/sidemenu3.css file
gulp menu4-rtl In this template gulp menu4-rtl command is for the changes is made in the assets/css-rtl/sidemenu4.scss file. sidemenu4.scss will be watched and whatever changes have made in the sidemenu4.scss file is automatically updated in the assets/css-rtl/sidemenu4.css file
gulp closed-rtl In this template gulp closed-rtl command is for the changes is made in the assets/css-rtl/closed-sidemenu.scss file. closed-sidemenu.scss will be watched and whatever changes have made in the closed-sidemenu.scss file is automatically updated in the assets/css-rtl/closed-sidemenu.css file
gulp beautify-rtl In this template gulp beautify-rtl command is for it beautify all .css files in assets/css-rtl/ folder

Folder Structure

HTML/
	├── assets
	   ├── css
	   ├── css-rtl
	   ├── images
	   ├── js
	   ├── plugins
	   ├── scss
	   ├── scss-rtl
	
	├── HTML-LTR
	   ├── Horizontal-Light
	   ├── Sidemenu-Icon-Light
	
	├── HTML-RTL
	   ├── Horizontal-Light
	   ├── Sidemenu-Icon-Light

Page Structure

Meta Header section

If you need to add another CSS .you should place CSS Link in Header Section Only

Loader
Main Content
Horizontal
Left sidebar
Footer
Default Js links

SCSS & CSS Files

style.css is the main CSS file located in the assets/css/ folder of the package. The whole CSS file is well-indexed with the topic and its related code. and all Scss files are imported in style.css

Layout Options of Custom Js

Below js code is used for theme settings , darkmode ,lightmode and sidebar and horizonatlmenu options.

Layout Options

Step 1:

Go To style.css is the main CSS file located in "assets/css/style.css" file go to line number 87 .and change the font family

if you want to change another font-family open the Google Fonts site And Select One font Family and import it into your style.css file

Example Imported Font Links
Imported Font Family Css
Step 2:

To import your Selected font family follow the below image

Example:

Step 1:

Open Custom.js files and enable dark-sidebar js

Step 2:

To enable dark-sidebar, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable color-sidebar js and disable default-sidebar js

Step 2:

To enable color-sidebar, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable default-sidebar js

Step 2:

To enable default-sidebar, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable dark-horizontal js

Step 2:

To enable dark-horizontal, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable color-horizonatl js

Step 2:

To enable color-horizontal, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable light-horizonatl js

Step 2:

To enable light-horizonatl, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable dark-mode js

Step 2:

To enable dark-mode, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable default-body js

Step 2:

To enable default-body, remove the comments " // " As shown below

Step 1:

Open Custom.js files and enable white-body js

Step 2:

To enable white-body, remove the comments " // ". As shown below

Step 1:

Open Custom.js files and enable light-dark-body js

Step 2:

To enable light-dark-body, remove the comments " // ". As shown below

Step 1:

Go to Material Icons of two-tone Icons. Material Icons link Click Here

Search the Icon For Your Website. Example Given Below

img
Step 2:

How to download It... Select the Icon for your website and download it and replace the Previous SVG icon. Example Given Below

img

This template we are using feathericons svgs. If you want to change the icons please follow the below steps

Step 1:

Here is the link for the feathericons icon Click here

If you want to change another icon Go to the Click here and select Svg then download anyone icon from the list as shown below

How to Select Svg Icons

Example:

How to Import SVG Icons

Step 2:

After downloading the icon please open the SVG icon in any HTML editor like notepad, noptepad++, etc, please copy the code

Example:

Paste the SVG code where ever you want and please add the class, for leftmenu add side-menu__icon for Horizontal menu add hor-icon

Example:For Left-menu Svg Iocns

Noteif you don't add the class for SVG code you will not get the exact styles as per the template design

Example:For Horizontal-menu Svg Iocns

Step 1:

Open all HTML files in Header section you have to change the sidemenu.css to closed-sidemenu.css style link. As shown in below Image.

Step 2:

Enable closed-sidemenu:

Step 1:

Open all HTML files in scripts you have to change the sidemenu.js to sidemenu1.js script link. As shown in below Image.

Step 2:

Enable Sidemenu-Iconoverlay:

Step 1:

Open all HTML files in Header section you have to change the sidemenu.css to sidemenu2.css style link. As shown in below Image.

Step 2:

Enable Sidemenu-Icontext:

Step 3:

Open all HTML files in scripts you have to change the sidemenu.js to sidemenu2.js script link. As shown in below Image.

Step 4:

Enable Sidemenu-Icontext:

Step 1:

Open all HTML files in Header section you have to change the sidemenu.css to sidemenu3.css style link. As shown in below Image.

Step 2:

Enable Hover-Submenu:

Step 3:

Open all HTML files in scripts you have to change the sidemenu.js to sidemenu1.js script link. As shown in below Image.

Step 4:

Enable Hover-Submenu:

Step 1:

Open all HTML files in Header section you have to change the sidemenu.css to sidemenu4.css style link. As shown in below Image.

Step 2:

Enable Hover-Submenu Style1:

Step 3:

Open all HTML files in scripts you have to change the sidemenu.js to sidemenu1.js script link. As shown in below Image.

Step 4:

Enable Hover-Submenu Style1:

Step 1:

Open Custom.js files and enable Boxed js

Step 2:

To enable Boxed, remove the Comments " // ". As shown below

Step 1:

Open all HTML files in body section you have to add centerlogo-horizontal class. As shown in below Image.

Step 2:

Enable Centerlogo-horizontal:

Font Used

Google fonts are used in the template. They are as follows: Google Fonts

Images Used

Some Images are used: Pexels.com

Some Images are used: Unsplash.com

Some Images are used: pngtree

THANK YOU!