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

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
	│	│		
	│	├── main
	│	│	│
	│	│	└── 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
	|	|	|			└── All sass files.
	
	
	

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.

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>
		

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>
	

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

Following are the stylesheet files:

we uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.

They are explained below:

• Bootstrap
• Jquery
• Font-Awesome
• ionicons
• ChartJS
• Flot
• Morris.js
• Sparkline
• Bootstrap Slider
• Ion Slider
• Date Picker
• Date Range Picker
• Color Picker
• Time Picker
• iCheck
• Input Mask
• Bootstrap WYSIHTML5
• CK Editor
• DataTables
• Full Calendar
• jQuery UI
• jQuery Knob
• jVector Map
• Slim Scroll
• Pace
• Bootstrap-timepicker
• Bootstrap Colorpicker
• Select2
• Pexels (images)
• Weather Icons
• Magnific Popup
• lightbox master
• Sweetalert
• ACE Editor
• Form Validation
• Form Wizard

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