Rapidly build modern web apps with
The Most Powerful Bootstrap 5 Admin Template

Admin Template is a popular open source WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 4 It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Admin Template is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Structure

I have tried my best to have standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.

File & Folder Structure

	
	
   Theme Directory
	
   main-file/
	
	│
	├── HTML
	│	│			
	│	├── assets/
	│	│	│
	│	│	└── icons
	│	│	│	└── All Icon font files
	│	│	│
	│	│	└── vendor_components
	│	│	│	└── All Third party components plugins File with Sourcs
	│	│	│
	│	│	└── vendor_plugins
	│	│		└── All plugins
	│	│		
	│	├── images/
	│	│	│
	│	│	└── All Images Here
	│	│		
	│	├── crm (All other pack demo as same)
	|	|	|
	|	│	├── vartical
	|	│	│	│
	|	│	│	└── main  (Light / Dark / RTL all separate folders)
	|	|	|		└── All HTML Files pages
	|	│	│	└── src
	|	|	|	|	└── css
	|	|	|	|		└── All css files.
	|	|	|	|	└── js
	|	|	|	|		└── All js Files pages
	|	|	|	|	└── scss
	|	|	|	|		└── All sass files.
	|	|	|	
	|	│	│	
	|	│	└── horizontal
	|	│	│	└── main  (Light / Dark / RTL all separate folders)
	|	|	|		└── All HTML Files pages
	|	│	│	└── src
	|	|	|	|	└── css
	|	|	|	|		└── All css files.
	|	|	|	|	└── js
	|	|	|	|		└── All js Files pages
	|	|	|	|	└── scss
	|	|	|	|	

	
	
	

Installation Guide

First of all, choose you desire folder & copy that folder and also copy that assets folder.

example : In HTML Folder template(choose your demo) + assets (Required) + images (Required) = Enjoy your demo.

Note!

Template Sass(scss) file only for {color_theme.css, skin_color.css, style.css, style_rtl.css} include. Template Sass(scss) File source in (scss folder)
Other Third party plugins Sass File not include. You can Find Third party plugins Sass file from plugins website.

Dependencies & Plugins

Dependencies

Template depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them.


Layout

The layout consists of four major parts:

  • Wrapper .wrapper. A div that wraps the whole site.
  • Main Header .main-header. Contains the logo and navbar.
  • Sidebar .main-sidebar. Contains the user panel and sidebar menu.
  • Content .content-wrapper. Contains the page header and content.

Layout Options

Note!

You cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.

We provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.

  • Fixed: use the class .fixed to get a fixed header and sidebar.
  • Collapsed Sidebar: use the class .sidebar-collapse to have a collapsed sidebar upon loading.
  • Boxed Layout: use the class .layout-boxed to get a boxed layout that stretches only to max width 1850px.

Skins

5 Skins can be available in the css/skins folder. just change class to the body tag to change the template's appearance. Here is the list of available skins:

Skin Class Preview Skin Class Preview Skin Class Preview
theme-primary theme-Warning theme-Danger
theme-success theme-info

RTL Ready

RTL Version

File Location: css/style_rtl.css

But all css file link so you can just add class in body tag class:rtl

Note! (For horizontal demo rtl)

For RTL Demo add Class in body tag class:rtl

For Nav RTL add Class in <ul id="main-menu" class="sm sm-blue sm-rtl"> under nav tag class:sm-rtl

Dark Version Ready

Dark Version

all css file link so you can just change class (light skin to dark skin) in body tag class:dark-skin

HTML Structure View

Box/Card Component (HTML)

The box/card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text.

Below code is used at the box/card component of all HTML pages

<div class="box">
  <div class="box-header with-border">
	<h4 class="box-title">Box <strong>slided up</strong></h4>
	<ul class="box-controls pull-right">
	  <li><a class="box-btn-close" href="#"></a></li>
	  <li><a class="box-btn-slide" href="#"></a></li>
	  <li><a class="box-btn-fullscreen" href="#"></a></li>
	</ul>
  </div>

  <div class="box-body">
	 <p>Ut vestibulum enim vitae elit luctus, id tincidunt metus suscipit. </p>
  </div>

  <div class="box-footer">
	 <p>Ut vestibulum enim vitae elit luctus, id tincidunt metus suscipit. </p>
  </div>
</div>
		
<div class="card">
  <div class="card-header">
	<h4 class="card-title">Box <strong>slided up</strong></h4>
  </div>

  <div class="card-body">
	 <p>Ut vestibulum enim vitae elit luctus, id tincidunt metus suscipit. </p>
  </div>

  <div class="card-footer">
	 <p>Ut vestibulum enim vitae elit luctus, id tincidunt metus suscipit. </p>
  </div>
</div>
		

Sidebar Tree Plugin (JS)

The tree plugin converts a nested list into a tree view where sub menus can be expanded.

Usage

This plugin can be activated using the data-api or jQuery.

Data API

Add data-widget="tree" to any ul or ol element to activate the plugin.

<ul class="sidebar-menu" data-widget="tree">

	<li>
	  <a href="charts_chartjs.html">
		<i class="ti-stats-up"></i>
		<span>ChartJS</span>
	  </a>
	</li> 

	<li class="treeview">
	  <a href="#">
		<i class="ti-view-list"></i>
		<span>Multilevel</span>
		<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
	  </a>
	  <ul class="treeview-menu">
		<li><a href="#">Level One</a></li>
		<li class="treeview">
		  <a href="#">Level One
			<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
		  </a>
		  <ul class="treeview-menu">
			<li><a href="#">Level Two</a></li>
			<li class="treeview">
			  <a href="#">Level Two
				<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
			  </a>
			  <ul class="treeview-menu">
				<li><a href="#">Level Three</a></li>
				<li><a href="#">Level Three</a></li>
			  </ul>
			</li>
		  </ul>
		</li>
		<li><a href="#">Level One</a></li>
	  </ul>
	</li> 

  </ul>
	

Control Sidebar Plugin (JavaScript)

The control sidebar component is part of layout as the right sidebar.

Usage

This plugin can be activated using the data-api or jQuery. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below.

HTML Markup

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Content of control sidebar goes here -->
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
				

Data API

Add data-toggle="control-sidebar" to any button or a element to activate the plugin. All options can be passed using the data api. Example: data-slide="false".

HTML Markup

<a href="#" data-toggle="control-sidebar">Toggle Control Sidebar</a>

JQuery

You can also activate the toggle button using jQuery by running the following example.

$("#my-toggle-button").controlSidebar(options);

SCSS & CSS

Template comes with power of SCSS. The css files can be generated from scss by simply following below steps:

We are using gulp which allows to easily compilation of scss to csss. In case if you don't know - Gulp is a gulp is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here

Prerequisites

Please follow 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

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g gulp from your terminal.

  • Git

    Make sure to have the Git installed & running in your computer. If you already have installed git on your computer, you can skip this step

Installation

To setup, follow below mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running in your computer

  • Install Dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder.

After you finished with above steps, you can run the command to compile scss into css: gulp

Following are the stylesheet files:

File Description
bootstrap.min.css bootstrap v5.x.x. The core bootstrap ile is being used in all the pages.
color_theme.css Combines various Color for template color style. it's generated from scss
skin_color.css Light and dark skin style. it's generated from scss
style.css The main stylesheet file, it's being generated from scss and contains all the css styles combined.
style_rtl.css This style sheet for RTL. it's generated from scss
vendors_css.css All vendors plugins style link thik this stylesheet. it's generated from scss

Browser Support

Note!

IE does not support.

Supports the following browsers:

  • Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Chrome (latest)
  • Opera (latest)

Support

If you need any help or feel any query don't hasitate just mail us (with licence key) on hello@multipurposethemes.com, we would love to help you, Once again thanks for purchasing the template, i hope you enjoy it. Thanks