Rapidly build modern web apps with
The Most Powerful Bootstrap 5.3 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 5 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/
	
	│
	├── BS5
	│	│			
	│	├── 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
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	├── main-light
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	├── main-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	├── main-light-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	├── main-mini-sidebar
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.	
	|	|	
	│	├── main-mini-sidebar-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.		
	|	|	
	│	├── main-light-mini-sidebar-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.	
	|	|	
	│	├── main-light-mini-sidebar-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.	
	|	|	
	│	├── main-semi-light
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.	
	|	|	
	│	├── main-semi-light-rtl
	│	│	│
	│	│	└── all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.	
	|	|	
	│	│	
	│	└── main-horizontal
	│	│	└──all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	│	
	│	└── main-horizontal-light
	│	│	└──all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	│	
	│	└── main-horizontal-rtl
	│	│	└──all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	│	
	│	└── main-horizontal-light-rtl
	│	│	└──all Pages HTML file
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	│	│	
	│	└── front-end
	│	│	└── corenav-master  (Nav pluging file)
	|	|		└── Js & Css
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── revolution-slider
	|	|		└── All Files 
	|	|
	|	|	└── scss
	|	|		└── All sass files.
	|	|	
	|	|	└── Video
	|	|		└── All Video files.
	|	|
	|	|	└── all Pages HTML file

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.


Plugins

ethos makes use of the following plugins. For documentation, updates or license information, please visit the provided links.

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

Mini Sidebar Version Ready

Mini Version

all css file link so you can just change class in body tag class:sidebar-collapse

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:

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