Adminify - Multipurpose Admin Dashboard Template.

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

Thanks so much!

  • Author: Adminify
  • Version: 1.0
  • Contact: Support

# Template Features

Adminify is the ultimate admin theme for Twitter Bootstrap. It’s what we’re calling the best the admin theme for Bootstrap to date. It has a unique, pixel-perfect design, and many fully customized widgets. We gave special attention to design and focussed on building a versatile admin theme that could work for an almost unlimited range of applications.

Here is only a small list of available features of in the Adminify:

  • HTML5 & CSS3
  • Clean and Valid Code
  • Built with Bootstrap 4
  • 70+ Pre-made HTML5 Pages
  • 50+ UI Components
  • 20+ Widgets
  • 6 Layouts Options
  • 18 Carefully Crafted Skins Colors
  • E-Commerce Pages
  • 15 Email Templates
  • Lightweight and Super Fast
  • Fully Responsive Pages
  • Developer friendly code
  • Easy to Customize
  • Multiple Color Variations
  • Awesome Documentation and Support

Support does include:

  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.

Support does not include:

  • Custmaization Work
  • Any Installation Work
  • Support for any Third Party Plugins / Software
  • Solve bug in your implemented template
  • Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)

# File Structure

  • Adminify
    • Admin
      • Assets
        • CSS
        • Images
        • JS
        • Plugins (40+ plugins)
      • index.html (70+ html files)
    • Documentation
      • documentation.html
      • changelog.html
    • Email
      • Account Templates
      • Launch Templates
      • Marketing Templates
      • Images (img)
    • favicon_io.zip

# Favicon # Logo

To change the Logo & favicon of your site, you need to load a new image in a site root or to point out a new address of the image.

# Change Favicon ... # Change Logo ...

# HTML Start

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	  <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Dashboard 1 | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet">
      <link href="assets/plugins/morris/morris.min.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>

# Content Structure

# Content Structure 
<!--================================-->
 <!-- Page Content Start -->
 <!--================================-->
 <div class="page-content">
	<!--================================-->
	<!-- Page Header Start -->
	<!--================================-->
	<div class="page-header">
	   <div class="search-form">
		  <form action="#" method="GET">
			 <div class="input-group">
				<input class="form-control search-input" name="search" placeholder="Type something..." type="text"/>
				<span class="input-group-btn"><span id="close-search"><i class="ion-ios-close-empty"></i></span></span>
			 </div>
		  </form>
	   </div>
	   <nav class="navbar navbar-default">
		  <!--================================-->
		  <!-- Brand and Logo Start -->
		  <!--================================-->
		  <div class="navbar-header">
			 <div class="navbar-brand">
				<ul class="list-inline">
				   <!-- Mobile Toggle and Logo -->
				   <li class="list-inline-item"><a class="hidden-md hidden-lg" href="javascript:void(0)" id="sidebar-toggle-button"><i class="ion-navicon tx-20"></i></a></li>
				   <!-- PC Toggle and Logo -->
				   <li class="list-inline-item"><a class="text-muted hidden-xs hidden-sm" href="javascript:void(0)" id="collapsed-sidebar-toggle-button"><i class="ion-navicon tx-20"></i></a></li>
				   <li class="list-inline-item mg-l-10"><a class="text-muted" href="javascript:void(0)" id="search-button"><i class="ion-ios-search-strong tx-20"></i></a></li>
				</ul>
			 </div>
		  </div>
		  <!--/ Brand and Logo End -->
		  <!--================================-->
		  <!-- Header Right Start -->
		  <!--================================-->
		  <div class="header-right pull-right">
			 <ul class="list-inline justify-content-end">
				<!--================================-->
				<!-- Languages Dropdown Start -->
				<!--================================-->
				<li class="list-inline-item dropdown hidden-xs hidden-sm">
				   <a class="text-muted" href="javascript:void(0)" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				   <img src="assets/images/flags/usa.png" class="mg-b-5 wd-20 img-fluid" alt="">
				   </a>
				   <ul class="dropdown-menu languages-dropdown shadow-2">
					  <li>
						 <a href="javascript:void(0)" data-lang="en"><img src="assets/images/flags/usa.png" class="img-fluid wd-20" alt=""> <span>English-US</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)" data-lang="es"><img src="assets/images/flags/spanish.png" class="img-fluid wd-20" alt=""> <span>Spanish</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)" data-lang="fr"><img src="assets/images/flags/french.png" class="img-fluid wd-20" alt=""> <span>French</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)" data-lang="gr"><img src="assets/images/flags/germany.png" class="img-fluid wd-20" alt=""> <span>German</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)" data-lang="ru"><img src="assets/images/flags/russia.png" class="img-fluid wd-20" alt=""> <span>Russian</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)" data-lang="ru"><img src="assets/images/flags/united-kingdom.png" class="img-fluid wd-20" alt=""> <span>English-UK</span></a>
					  </li>
				   </ul>
				</li>
				<!--/ Languages Dropdown End -->
				<!--================================-->
				<!-- Notifications Dropdown Start -->
				<!--================================-->
				<li class="list-inline-item dropdown hidden-xs hidden-sm">
				   <a class="text-muted" href="javascript:void(0)" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				   <i class="ion-ios-bell-outline tx-20"></i>
				   <span class="notification-count wave in"></span>
				   </a>
				   <ul class="dropdown-menu shadow-2">
					  <li class="notification-header">
						 <span class="float-left">Notifications (7)</span>
						 <a href="javascript:void(0)" class="float-right">Mark all as read</a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-ios-camera-outline pd-r-5 tx-teal"></i>
						 <span>Steve rated your photo</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-document pd-r-5 tx-purple"></i>
						 <span>New document available</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-android-favorite-outline pd-r-5 tx-warning"></i>
						 <span>John added you to fav</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-ios-stopwatch-outline pd-r-5 tx-primary"></i>
						 <span>Meeting in 1 hour</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-document pd-r-5 tx-purple"></i>
						 <span>New document available</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-ios-stopwatch-outline pd-r-5 tx-primary"></i>
						 <span>Meeting in 1 hour</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-box">
						 <a href="javascript:void(0)">
						 <i class="ion-ios-speedometer-outline pd-r-5 tx-success"></i>
						 <span>Server 5 overloaded</span>
						 <small class="pull-right text-muted">
						 <i class="icon-clock pd-r-5"></i>Just now 
						 </small>
						 </a>
					  </li>
					  <li class="notification-footer text-center">
						 <a href="javascript:void(0)">View All</a>
					  </li>
				   </ul>
				</li>
				<!--/ Notifications Dropdown End -->
				<!--================================-->
				<!-- Messages Dropdown Start -->
				<!--================================-->
				<li class="list-inline-item dropdown hidden-xs hidden-sm">
				   <a class="text-muted" href="javascript:void(0)" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				   <i class="ion-ios-email-outline tx-20"></i>
				   <span class="messages-count wave in"></span>
				   </a>
				   <ul class="dropdown-menu shadow-2">
					  <li class="messages-header">
						 <span class="float-left">Messages (3)</span>
						 <a href="javascript:void(0)" class="float-right">Mark all as read</a>
					  </li>
					  <li class="messages-box">
						 <div class="row">
							<div class="col-lg-3 col-sm-3 col-3 text-center">
							   <img src="assets/images/avatar/avatar4.png" class="mg-10 w-100 rounded-circle" alt="">
							</div>
							<div class="col-lg-8 col-sm-8 col-8">
							   <strong>David John</strong>
							   <div class="tx-12">
								  Lorem ipsum dolor sit ipsum dolor sit amet, consectetur
							   </div>
							   <small class="tx-gray-500">27.11.2015, 15:00</small>
							</div>
						 </div>
					  </li>
					  <li class="messages-box">
						 <div class="row">
							<div class="col-lg-3 col-sm-3 col-3 text-center">
							   <img src="assets/images/avatar/avatar2.png" class="mg-10 w-100 rounded-circle" alt="">
							</div>
							<div class="col-lg-8 col-sm-8 col-8">
							   <strong>David John</strong>
							   <div class="tx-12">
								  Lorem ipsum dolor sit ipsum dolor sit amet, consectetur
							   </div>
							   <small class="tx-gray-500">27.11.2015, 15:00</small>
							</div>
						 </div>
					  </li>
					  <li class="messages-box">
						 <div class="row">
							<div class="col-lg-3 col-sm-3 col-3 text-center">
							   <img src="assets/images/avatar/avatar6.png" class="mg-10 w-100 rounded-circle" alt="">
							</div>
							<div class="col-lg-8 col-sm-8 col-8">
							   <strong>David John</strong>
							   <div class="tx-12">
								  Lorem ipsum dolor sit ipsum dolor sit amet, consectetur
							   </div>
							   <small class="tx-gray-500">27.11.2015, 15:00</small>
							</div>
						 </div>
					  </li>
					  <li class="messages-footer text-center">
						 <a href="javascript:void(0)">View All</a>
					  </li>
				   </ul>
				</li>
				<!--/ Messages Dropdown End -->
				<!--================================-->
				<!-- Profile Dropdown Start -->
				<!--================================-->
				<li class="list-inline-item dropdown">
				   <a class="text-muted" href="javascript:void(0)" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				   <span class="select-profile">Hi, John!</span>
				   <img src="assets/images/avatar/avatar.png" class="mg-b-10 img-fluid wd-30" alt="">
				   </a>
				   <ul class="dropdown-menu profile-dropdown shadow-2">
					  <li>
						 <a href="page-profile.html"><i class="icon-user"></i><span>My Profile</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)"><i class="icon-pencil"></i><span>Edit Profile</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)"><i class="icon-action-redo"></i><span>Activity Log</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)"><i class="icon-calendar"></i><span>My Calendar</span></a>
					  </li>
					  <li>
						 <a href="javascript:void(0)"><i class="icon-cloud-download"></i><span>My Download</span></a>
					  </li>
					  <li>
						 <hr class="hr-style">
					  </li>
					  <li>
						 <a href="javascript:void(0)"><i class="icon-settings"></i><span>Settings</span></a>
					  </li>
					  <li>
						 <a href="page-unlock.html"><i class="icon-lock"></i><span>Lockscreen</span></a>
					  </li>
					  <li>
						 <a href="page-singin.html"><i class="icon-logout"></i><span>Sing Out</span></a>
					  </li>
				   </ul>
				</li>
				<!-- Profile Dropdown End -->
			 </ul>
		  </div>
		  <!--/ Header Right End -->
	   </nav>
	</div>
	<!--/ Page Header End -->
	<!--================================-->
	<!-- Page Inner Start -->
	<!--================================-->
	<div class="page-inner">
	   <!--================================-->
	   <!-- Main Wrapper Start -->
	   <!--================================-->
	   <div id="main-wrapper">
		  <!--================================-->
		  <!-- Breadcrumb Start -->
		  <!--================================-->
		  <div class="pageheader pd-y-25">
			 <div class="pd-t-5 pd-b-5">
				<h1 class="pd-0 mg-0 tx-20 text-overflow">Dashboard v.1</h1>
			 </div>
			 <div class="breadcrumb pd-0 mg-0">
				<a class="breadcrumb-item" href="index.html"><i class="icon ion-ios-home-outline"></i> Home</a>
				<a class="breadcrumb-item" href="javascript:void(0)">Dashboard</a>
				<span class="breadcrumb-item active">Dashboard v.1</span>
			 </div>
		  </div>
		  <!--/ Breadcrumb End -->
		  <!--================================-->
		  <!-- Count Card Start -->
		  <!--================================-->
		  <div class="row">
			 <div class="col-xl-3 col-md-6">
				<div class="card bg-teal mb-4 shadow-1">
				   <div class="card-body card-img">
					  <div class="card-icon">
						 <i class="ion-ios-analytics float-right"></i>
					  </div>
					  <div class="text-white">
						 <h6 class="text-uppercase tx-13">Orders</h6>
						 <h4 class="mb-4">587</h4>
						 <span class="badge badge-warning ft-right"> +31% </span> <span>From previous period</span>
					  </div>
				   </div>
				</div>
			 </div>
			 <div class="col-xl-3 col-md-6">
				<div class="card bg-danger mb-4 shadow-1">
				   <div class="card-body card-img">
					  <div class="card-icon">
						 <i class="ion-ios-basketball-outline float-right"></i>
					  </div>
					  <div class="text-white">
						 <h6 class="text-uppercase tx-13">Revenue</h6>
						 <h4 class="mb-4">$4,746</h4>
						 <span class="badge badge-info ft-right"> -15% </span> <span>From previous period</span>
					  </div>
				   </div>
				</div>
			 </div>
			 <div class="col-xl-3 col-md-6">
				<div class="card bg-primary mb-4 shadow-1">
				   <div class="card-body card-img">
					  <div class="card-icon">
						 <i class="ion-ios-lightbulb-outline float-right"></i>
					  </div>
					  <div class="text-white">
						 <h6 class="text-uppercase tx-13">Average Price</h6>
						 <h4 class="mb-4">$24.4</h4>
						 <span class="badge badge-warning ft-right"> 10% </span> <span>From previous period</span>
					  </div>
				   </div>
				</div>
			 </div>
			 <div class="col-xl-3 col-md-6">
				<div class="card bg-info mb-4 shadow-1">
				   <div class="card-body card-img">
					  <div class="card-icon">
						 <i class="ion-ios-pie-outline float-right"></i>
					  </div>
					  <div class="text-white">
						 <h6 class="text-uppercase tx-13">Product Sold</h6>
						 <h4 class="mb-4">$2,390</h4>
						 <span class="badge badge-danger ft-right"> +67% </span> <span>From previous period</span>
					  </div>
				   </div>
				</div>
			 </div>
		  </div>
		  <!--/ Count Card End -->
		  <!--================================-->
		  <!-- Statistic Start -->
		  <!--================================-->						
		  <div class="row no-gutters d-block clearfix">
			 <div class="card mg-t-5 mg-b-30 shadow-1">
				<div class="card-header with-elements">
				   <h4 class="card-header-title">
					  Statistics
				   </h4>
				   <div class="card-header-btn">
					  <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse1" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
					  <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
					  <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
					  <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
				   </div>
				</div>
				<div class="row no-gutters row-bordered collapse show" id="collapse1">
				   <div class="col-md-3">
					  <div class="card-body">
						 <div class="row mg-t-20">
							<div class="col-6 col-xl-6 text-muted mb-3">Total sales</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">20,332</span>
							   <sup class="text-success">+15%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Income amount</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">$10,534</span>
							   <sup class="text-danger">-24%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Total Visitors</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">100,534</span>
							   <sup class="text-success">+16%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Page views</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">21,332</span>
							   <sup class="text-danger">-12%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Total budgets</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">$15,534</span>
							   <sup class="text-success">+11%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Total Projects</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">210</span>
							   <sup class="text-danger">-15%</sup>
							</div>
							<div class="col-6 col-xl-6 text-muted mb-3">Completed task</div>
							<div class="col-6 col-xl-6 mb-3">
							   <span class="text-big">251</span>
							   <sup class="text-success">+12%</sup>
							</div>
						 </div>
					  </div>
				   </div>
				   <div class="col-md-9">
					  <div class="card-body">
						 <div class="clearfix">
							<div id="area-legend" class="text-center"></div>
							<div id="area2" style="height:250px"></div>
						 </div>
					  </div>
				   </div>
				</div>
			 </div>
		  </div>
		  <!--/ Statistic End -->	
		  <div class="row clearfix">
			 <div class="col-md-6 col-lg-12 col-xl-6">
				<!--================================-->
				<!-- Popular Products Start -->
				<!--================================-->
				<div class="card mb-4 shadow-1">
				   <div class="card-header">
					  <h4 class="card-header-title">
						 Popular Products
					  </h4>
				   <div class="card-header-btn">
					  <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse2" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
					  <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
					  <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
					  <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
				   </div>
				   </div>
				   <div class="table-responsive collapse show" id="collapse2">
					  <table class="table card-table">
						 <thead>
							<tr>
							   <th colspan="2">Item</th>
							   <th>Price</th>
							   <th>Sales</th>
							   <th>Views</th>
							</tr>
						 </thead>
						 <tbody>
							<tr>
							   <td class="align-middle" style="width: 75px">
								  <img class="wd-50" src="assets/images/products/img1.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">The Dothraki Shoes</a>
							   </td>
							   <td class="align-middle">$180.00</td>
							   <td class="align-middle">343</td>
							   <td class="align-middle">4,442</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img2.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">Westeros Sneaker</a>
							   </td>
							   <td class="align-middle">$64.55</td>
							   <td class="align-middle">182</td>
							   <td class="align-middle">7,231</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img3.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">The Dothraki Shoes</a>
							   </td>
							   <td class="align-middle">$235.55</td>
							   <td class="align-middle">84</td>
							   <td class="align-middle">4,672</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img4.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">Kubaz Sunglass</a>
							   </td>
							   <td class="align-middle">$160.00</td>
							   <td class="align-middle">64</td>
							   <td class="align-middle">5,611</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img5.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">Kel Dor Sunglass</a>
							   </td>
							   <td class="align-middle">$159.00</td>
							   <td class="align-middle">72</td>
							   <td class="align-middle">6,435</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img1.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">The Dothraki Shoes</a>
							   </td>
							   <td class="align-middle">$162.00</td>
							   <td class="align-middle">69</td>
							   <td class="align-middle">2,911</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img2.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">Westeros Sneaker</a>
							   </td>
							   <td class="align-middle">$159.00</td>
							   <td class="align-middle">75</td>
							   <td class="align-middle">6,749</td>
							</tr>
							<tr>
							   <td class="align-middle">
								  <img class="wd-50" src="assets/images/products/img1.jpg" alt="">
							   </td>
							   <td class="align-middle">
								  <a href="javascript:void(0)">The Dothraki Shoes</a>
							   </td>
							   <td class="align-middle">$235.55</td>
							   <td class="align-middle">91</td>
							   <td class="align-middle">4,572</td>
							</tr>
						 </tbody>
					  </table>
				   </div>
				</div>
				<!--/ Popular Products End -->
			 </div>
			 <div class="col-md-6 col-lg-12 col-xl-6">
				<!--================================-->
				<!-- Transaction History Start -->
				<!--================================-->
				<div class="card mb-4 shadow-1">
				   <div class="card-header">
					  <h4 class="card-header-title">
						 Transaction History
					  </h4>
				   <div class="card-header-btn">
					  <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse3" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
					  <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
					  <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
					  <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
				   </div>
				   </div>
				   <div class="table-responsive collapse show" id="collapse3">
					  <table class="table card-table">
						 <thead>
							<tr>
							   <th colspan="2">User</th>
							   <th>Type</th>
							   <th>Date</th>
							</tr>
						 </thead>
						 <tbody>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user1.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">Mark K. Peters</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-success ft-right mg-r-10">Verified</span> Email verified
							   </td>
							   <td>Just Now</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user2.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">Karmen F. Brown</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-info ft-right mg-r-10">Pending</span> Pending verification
							   </td>
							   <td>Apr 21, 2017 8:34am</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user3.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">Magalpok</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-success ft-right mg-r-10">Success</span> Purchased success
							   </td>
							   <td>Apr 10, 2017 4:40pm</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user4.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">Ariel T. Hall</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-warning ft-right mg-r-10">Hold</span> Payment on hold
							   </td>
							   <td>Apr 02, 2017 6:45pm</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user5.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">John L. Goulette</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-danger ft-right mg-r-10">Deactivated</span> Account deactivated
							   </td>
							   <td>Mar 30, 2017 10:30am</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user4.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">Ariel T. Hall</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-warning ft-right mg-r-10">Hold</span> Payment on hold
							   </td>
							   <td>Apr 02, 2017 6:45pm</td>
							</tr>
							<tr>
							   <td class="pd-l-20">
								  <img src="assets/images/user/user2.png" class="wd-36 rounded-circle" alt="Image">
							   </td>
							   <td>
								  <a href="javascript:void(0)" class="d-block">John L. Goulette</a>
								  <span class="tx-10 tx-gray-500 d-block">TRANSID: 1234567890</span>
							   </td>
							   <td class="tx-12">
								  <span class="badge-danger ft-right mg-r-10">Deactivated</span> Account deactivated
							   </td>
							   <td>Mar 30, 2017 10:30am</td>
							</tr>
						 </tbody>
					  </table>
				   </div>
				</div>
				<!--/ Transaction History End -->
			 </div>
		  </div>
		  <div class="row clearfix">
			 <div class="col-md-4 col-lg-12 col-xl-4">
				<!--================================-->
				<!-- Support Tickets Start -->
				<!--================================-->
				<div class="card mg-y-10 shadow-1">
				   <div class="card-header">
					  <h4 class="card-header-title">
						 Support Tickets
					  </h4>
					  <div class="card-header-btn">
						 <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse4" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
						 <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
						 <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
						 <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
					  </div>
				   </div>
				   <div class="card-body collapse show" id="collapse4">
					  <div class="pb-1 mb-2">
						 <div class="badge-warning float-right">Feature</div>
						 <a href="javascript:void(0)">Lorem ipsum dolor sit amet, vis erat denique in.</a>
						 <p class="text-muted mg-b-0">Support ID: #85645563</p>
						 <small class="text-muted">Created by: <a href="javascript:void(0)" class="text-dark">Peter Johnson</a> 1 day ago</small>
					  </div>
					  <div class="pb-1 mb-2">
						 <div class="badge-danger float-right">Bug</div>
						 <a href="javascript:void(0)">Lorem ipsum dolor sit amet, vis erat denique in.</a>
						 <p class="text-muted mg-b-0">Support ID: #85645563</p>
						 <small class="text-muted">Created by: <a href="javascript:void(0)" class="text-dark">Peter Johnson</a> 2 day ago</small>
					  </div>
					  <div class="pb-1 mb-2">
						 <div class="badge-info float-right">Informational</div>
						 <a href="javascript:void(0)">Lorem ipsum dolor sit amet, vis denique in.</a>
						 <p class="text-muted mg-b-0">Support ID: #85645563</p>
						 <small class="text-muted">Created by: <a href="javascript:void(0)" class="text-dark">Peter Johnson</a> 4 day ago</small>
					  </div>
					  <div class="pb-1 mb-2">
						 <div class="badge-warning float-right">Feature</div>
						 <a href="javascript:void(0)">Lorem ipsum dolor sit amet, vis erat denique in.</a>
						 <p class="text-muted mg-b-0">Support ID: #85645563</p>
						 <small class="text-muted">Created by: <a href="javascript:void(0)" class="text-dark">Peter Johnson</a> 3 day ago</small>
					  </div>
					  <div class="pb-1">
						 <div class="badge-success float-right">Enhancement</div>
						 <a href="javascript:void(0)">Lorem ipsum dolor sit amet, erat denique in.</a>
						 <p class="text-muted mg-b-0">Support ID: #85645563</p>
						 <small class="text-muted">Created by: <a href="javascript:void(0)" class="text-dark">Peter Johnson</a> 5 day ago</small>
					  </div>
				   </div>
				</div>
				<!--/ Support Tickets End -->
			 </div>
			 <!--================================-->
			 <!-- Recent Activity Start -->
			 <!--================================-->
			 <div class="col-md-4 col-lg-12 col-xl-4">
				<div class="card card-activities mg-y-10 shadow-1">
				   <div class="card-header">
					  <h4 class="card-header-title">
						 Recent Activities
					  </h4>
					  <div class="card-header-btn">
						 <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse5" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
						 <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
						 <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
						 <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
					  </div>
				   </div>
				   <div class="card-body collapse show" id="collapse5">
					  <div class="media-list">
						 <div class="media">
							<div class="activity-icon bg-primary">
							   <i class="icon ion-stats-bars"></i>
							</div>
							<div class="media-body">
							   <h6>Report has been updated</h6>
							   <p>Aenean vulputate eleifend tellus. A nean leo ligula, porttitor.</p>
							   <span>2 hours ago</span>
							</div>
						 </div>
						 <div class="media">
							<div class="activity-icon bg-success">
							   <i class="icon ion-trophy"></i>
							</div>
							<div class="media-body">
							   <h6>Achievement Unlocked</h6>
							   <p>Aenean vulputate eleifend tellus. A nean leo ligula, porttitor.</p>
							   <span>2 hours ago</span>
							</div>
						 </div>
						 <div class="media">
							<div class="activity-icon bg-purple">
							   <i class="icon ion-image"></i>
							</div>
							<div class="media-body">
							   <h6>Added new images</h6>
							   <p>Aenean vulputate eleifend tellus. A nean leo ligula, porttitor.</p>
							   <span>2 hours ago</span>
							</div>
						 </div>
					  </div>
				   </div>
				</div>
			 </div>
			 <!--/ Recent Activity End -->
			 <!--================================-->
			 <!-- Friends  List Start -->
			 <!--================================-->
			 <div class="col-md-4 col-lg-12 col-xl-4">
				<div class="card mg-y-10 shadow-1">
				   <div class="card-header">
					  <h4 class="card-header-title">
						 People You May Know
					  </h4>
					  <div class="card-header-btn">
						 <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse6" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
						 <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
						 <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
						 <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
					  </div>
				   </div>
				   <div class="card-body collapse show" id="collapse6">
					  <div class="card-people-list">
						 <div class="media">
							<img src="assets/images/avatar/avatar.png" alt="">
							<div class="media-body">
							   <a href="javascript:void(0)">Amber Heard</a>
							   <p class="tx-13">Software Engineer</p>
							</div>
							<a href="javascript:void(0)"><i class="icon ion-person-add tx-20"></i></a>
						 </div>
						 <div class="media">
							<img src="assets/images/avatar/avatar2.png" alt="">
							<div class="media-body">
							   <a href="javascript:void(0)">Richard Salomon</a>
							   <p class="tx-13">Architect</p>
							</div>
							<a href="javascript:void(0)"><i class="icon ion-person-add tx-20"></i></a>
						 </div>
						 <div class="media">
							<img src="assets/images/avatar/avatar3.png" alt="">
							<div class="media-body">
							   <a href="javascript:void(0)">Warren Vito</a>
							   <p class="tx-13">Sales Representative</p>
							</div>
							<a href="javascript:void(0)"><i class="icon ion-person-add tx-20"></i></a>
						 </div>
						 <div class="media">
							<img src="assets/images/avatar/avatar4.png" alt="">
							<div class="media-body">
							   <a href="javascript:void(0)">Warren Vito</a>
							   <p class="tx-13">Sales Representative</p>
							</div>
							<a href="javascript:void(0)"><i class="icon ion-person-add tx-20"></i></a>
						 </div>
						 <div class="media">
							<img src="assets/images/avatar/avatar5.png" alt="">
							<div class="media-body">
							   <a href="javascript:void(0)">Charlene Plateros</a>
							   <p class="tx-13">Sales Representative</p>
							</div>
							<a href="javascript:void(0)"><i class="icon ion-person-add tx-20"></i></a>
						 </div>
					  </div>
				   </div>
				</div>
			 </div>
			 <!--/ Friends  List End -->
		  </div>
		  <!--================================-->
		  <!-- Social Activity 2 Start -->
		  <!--================================-->
		  <div class="row clearfix">
			 <div class="col-md-4">
				<div class="card mb-4 text-white bg-twitter shadow-1">
				   <div class="card-body">
					  <i class="fa fa-twitter tx-30 mb-3"></i>
					  <h6 class="card-title text-light tx-13">Some quick example text to build on the card title and make up the bulk of the card's content.</h6>
					  <span class="float-left tx-11">11 January, 2018</span>
					  <div class=" float-right">
						 <span class="mr-3 tx-11"> <i class="fa fa-heart"></i> 234</span>
						 <span class="tx-11"> <i class="fa fa-thumbs-up "></i> 456</span>
					  </div>
				   </div>
				</div>
			 </div>
			 <div class="col-md-4">
				<div class="card mb-4 text-white bg-facebook shadow-1">
				   <div class="card-body">
					  <i class="fa fa-facebook tx-30 mb-3"></i>
					  <h6 class="card-title text-light tx-13">Some quick example text to build on the card title and make up the bulk of the card's content.</h6>
					  <span class="float-left tx-11">11 January, 2018</span>
					  <div class=" float-right">
						 <span class="mr-3 tx-11"> <i class="fa fa-heart"></i> 234</span>
						 <span class="tx-11"> <i class="fa fa-thumbs-up "></i> 456</span>
					  </div>
				   </div>
				</div>
			 </div>
			 <div class="col-md-4">
				<div class="card mb-4 text-white bg-google-plus shadow-1">
				   <div class="card-body">
					  <i class="fa fa-google-plus tx-30 mb-3"></i>
					  <h6 class="card-title text-light tx-13">Some quick example text to build on the card title and make up the bulk of the card's content.</h6>
					  <span class="float-left tx-11">11 January, 2018</span>
					  <div class=" float-right">
						 <span class="mr-3 tx-11"><i class="fa fa-heart"></i> 234</span>
						 <span class="tx-11"><i class="fa fa-thumbs-up"></i> 456</span>
					  </div>
				   </div>
				</div>
			 </div>
		  </div>
		  <!--/ Social Activity 2 End -->
	   </div>
	   <!--/ Main Wrapper End -->
	</div>
	<!--/ Page Inner End -->
	<!--================================-->
	<!-- Page Footer Start -->	
	<!--================================-->
	<footer class="page-footer bg-gray-100">
	   <div class="pd-y-10 pd-x-25">
		  <span class="tx-italic text-muted">Copyright© 2019</span>
	   </div>
	</footer>
	<!-- Page Footer End -->	
 </div>
 <!-- / End Page Content -->

# Layout Settings

# Layout Settings

Default layout design for full width on your screen size. There also fives option on this layout templates.

# Collapsed Sidebar

Just add .page-sidebar-collapsed class on <body> tag.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Dashboard 1 | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet">
      <link href="assets/plugins/morris/morris.min.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   
<body class="page-sidebar-collapsed">
   
</body>

      <!--================================-->
      <!-- Footer Script -->	
      <!--================================-->
      <script src="assets/plugins/jquery/jquery.min.js"></script>
      <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
      <script src="assets/plugins/popper/popper.js"></script>
      <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/plugins/pace/pace.min.js"></script>
      <script src="assets/js/jquery.slimscroll.min.js"></script>
      <script src="assets/js/highlight.min.js"></script>
      <script src="assets/js/adminify.js"></script>
      <script src="assets/js/custom.js"></script>
   </body>
</html>
# Fixed Header

Just add .page-header-fixed class on <body> tag.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Dashboard 1 | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet">
      <link href="assets/plugins/morris/morris.min.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   
<body class="page-header-fixed">
   
</body>

      <!--================================-->
      <!-- Footer Script -->	
      <!--================================-->
      <script src="assets/plugins/jquery/jquery.min.js"></script>
      <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
      <script src="assets/plugins/popper/popper.js"></script>
      <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/plugins/pace/pace.min.js"></script>
      <script src="assets/js/jquery.slimscroll.min.js"></script>
      <script src="assets/js/highlight.min.js"></script>
      <script src="assets/js/adminify.js"></script>
      <script src="assets/js/custom.js"></script>
   </body>
</html>
# Collapsed and Fixed Header

Just add .page-sidebar-collapsed .page-header-fixed class on <body> tag.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Dashboard 1 | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet">
      <link href="assets/plugins/morris/morris.min.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   
<body class="page-sidebar-collapsed page-header-fixed">
   
</body>

      <!--================================-->
      <!-- Footer Script -->	
      <!--================================-->
      <script src="assets/plugins/jquery/jquery.min.js"></script>
      <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
      <script src="assets/plugins/popper/popper.js"></script>
      <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/plugins/pace/pace.min.js"></script>
      <script src="assets/js/jquery.slimscroll.min.js"></script>
      <script src="assets/js/highlight.min.js"></script>
      <script src="assets/js/adminify.js"></script>
      <script src="assets/js/custom.js"></script>
   </body>
</html>
# Boxed Layout

Just add .page-container container class on page continer section.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Boxed layout | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <!--================================-->
      <!-- Page Container Start -->
      <!--================================-->
      <div class="page-container container">
      
	  
	  
	  </div>
      <!-- /Page Container -->
      <!--================================-->
      <!-- Footer Script -->	
      <!--================================-->
      <script src="assets/plugins/jquery/jquery.min.js"></script>
      <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
      <script src="assets/plugins/popper/popper.js"></script>
      <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/plugins/pace/pace.min.js"></script>
      <script src="assets/js/jquery.slimscroll.min.js"></script>
      <script src="assets/js/highlight.min.js"></script>
      <script src="assets/js/adminify.js"></script>
      <script src="assets/js/custom.js"></script>
   </body>
</html>
# Boxed and Collapsed Sidebar

Just add .page-header-fixed class on <body> tag. and add .page-container container class on page continer section.

<!DOCTYPE html>
<html lang="zxx">
   <head>
      <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="description" content="">
	  <meta name="keyword" content="">
	  <meta name="author"  content=""/>
      <!-- Page Title -->
      <title>Boxed layout | Adminify - Multipurpose Admin Dashboard Template</title>
      <!-- Main CSS -->			
      <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
      <link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
      <link href="assets/plugins/ionicons/css/ionicons.css" rel="stylesheet">
      <link href="assets/css/skin-turquoise.css" rel="stylesheet" id="style-colors">
      <link href="assets/css/app.min.css" rel="stylesheet"/>
      <link href="assets/css/style.css" rel="stylesheet"/>
      <!-- Favicon -->	
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body class="page-header-fixed">
      <!--================================-->
      <!-- Page Container Start -->
      <!--================================-->
      <div class="page-container container">
      
	  
	  </div>
      <!-- /Page Container -->
      <!--================================-->
      <!-- Footer Script -->	
      <!--================================-->
      <script src="assets/plugins/jquery/jquery.min.js"></script>
      <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
      <script src="assets/plugins/popper/popper.js"></script>
      <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/plugins/pace/pace.min.js"></script>
      <script src="assets/js/jquery.slimscroll.min.js"></script>
      <script src="assets/js/highlight.min.js"></script>
      <script src="assets/js/adminify.js"></script>
      <script src="assets/js/custom.js"></script>
   </body>
</html>

# Color Variations

We have made Total 18+ Color variation with light and dark sidebar

<!--================================-->
<!-- Color switcher Start -->
<!--================================-->	
<div class="color-switcher hide-color-switcher">
 <!--Color switcher Show/Hide button -->
 <a class="switcher-button"><i class="fa fa-cog fa-spin"></i></a>
 <!-- Color switcher title -->
 <div class="color-switcher-title">
	<span class="tx-16 text-center">Theme Switcher</span>
 </div>
 <!-- Colors style -->
 <div class="color-list">
	<a class="color turquoise-theme" title="turquoise"></a>
	<a class="color emerald-theme" title="emerald"></a>
	<a class="color peter-river-theme" title="peter-river"></a>
	<a class="color amethyst-theme" title="amethyst"></a>
	<a class="color wet-asphalt-theme" title="wet-asphalt"></a>
	<a class="color green-sea-theme" title="green-sea"></a>
	<a class="color nephritis-theme" title="nephritis"></a>
	<a class="color belize-hole-theme" title="belize-hole"></a>
	<a class="color wisteria-theme" title="wisteria"></a>
	<a class="color midnight-blue-theme" title="midnight-blue"></a>
	<a class="color sun-flower-theme" title="sun-flower"></a>
	<a class="color carrot-theme" title="carrot"></a>
	<a class="color alizarin-theme" title="alizarin"></a>
	<a class="color concrete-theme" title="concrete"></a>
	<a class="color orange-theme" title="orange"></a>
	<a class="color pumpkin-theme" title="pumpkin"></a>
	<a class="color bordeaux-theme" title="bordeaux"></a>
	<a class="color dark-theme" title="dark"></a>
 </div>
</div>
<!--/ Color switcher  End  -->

# Card Options

# Card Options 
<div class="card shadow-1">
	<div class="card-header with-elements">
	   <h4 class="card-header-title">
		  Statistics
	   </h4>
	   <div class="card-header-btn">
		  <a  href="javascript:void(0)" data-toggle="collapse" class="btn btn-info" data-target="#collapse1" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
		  <a href="javascript:void(0)" data-toggle="refresh" class="btn btn-warning"><i class="ion-android-refresh"></i></a>
		  <a href="javascript:void(0)" data-toggle="expand" class="btn btn-success"><i class="ion-android-expand"></i></a>
		  <a href="javascript:void(0)" data-toggle="remove" class="btn btn-danger"><i class="ion-ios-trash-outline"></i></a>
	   </div>
	</div>
	<div class="row">
	   <div class="col-md-3">
		  <div class="card-body">
		  
		  </div>
	   </div>
	</div>
 </div>
</div>

# Buttons Options

# Basic Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
</div>

# Charts Options

# Charts CSS & JS

Charts Where to find it's CSS Where to find it's JS
Morris Chart assets/plugins/morris/morris.min.css assets/plugins/morris/morris.min.js
assets/plugins/morris/raphael.min.js
assets/plugins/morris/morris-sample.js
ChartJS Chart assets/plugins/chartjs/chartjs.js
assets/plugins/chartjs/chart-sample.js
Flot Chart assets/plugins/flot/jquery.flot.js
assets/plugins/flot/jquery.flot.pie.js
assets/plugins/flot/jquery.flot.resize.js
assets/plugins/flot/flot-sample.js
Chartlist Chart assets/plugins/chartist/chartist.css assets/plugins/chartist/chartist.js
assets/plugins/chartist/chart-sample.js
Sparkline Chart assets/plugins/sparkline/sparkline.min.js
assets/plugins/sparkline/sparkline-sample.js
Peity Chart assets/plugins/peity/jquery.peity.js
assets/plugins/peity/peity-sample.js

# Forms Options

# Basic Form

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">User Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
    </div>
    <div class="form-group">
        <div class="checkbox checkbox-success">
            <input id="checkbox1" type="checkbox">
            <label for="checkbox1"> Remember me </label>
        </div>
    </div>
    <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
    <button type="submit" class="btn btn-inverse waves-effect waves-light">Cancel</button>
</form>

# Tables Options

# Basic Table

<table class="table table-responsive-sm">
 <thead>
	<tr>
	   <th>#</th>
	   <th>First Name</th>
	   <th>Last Name</th>
	   <th>Username</th>
	</tr>
 </thead>
 <tbody>
	<tr>
	   <th scope="row">1</th>
	   <td>Mark</td>
	   <td>Otto</td>
	   <td>@mdo</td>
	</tr>
	<tr>
	   <th scope="row">2</th>
	   <td>Jacob</td>
	   <td>Thornton</td>
	   <td>@fat</td>
	</tr>
	<tr>
	   <th scope="row">3</th>
	   <td>Larry</td>
	   <td>the Bird</td>
	   <td>@twitter</td>
	</tr>
	<tr>
	   <th scope="row">4</th>
	   <td>Jacob</td>
	   <td>Thornton</td>
	   <td>@fat</td>
	</tr>
	<tr>
	   <th scope="row">5</th>
	   <td>Larry</td>
	   <td>the Bird</td>
	   <td>@twitter</td>
	</tr>
 </tbody>
</table>

Other Table Plugins & Documentation

# Map Options

# Google Maps

<div id="basic-map" style="height:300px"></div>
<div id="marker-map" style="height:300px"></div>
<div id="overlay-map" style="height:300px"></div>
<div id="polygon-map" style="height:300px"></div>
<div id="context-menu-map" style="height:300px"></div>
<div id="custom-control-map" style="height:300px"></div>
<div id="fusion-tables-map" style="height:300px"></div>
<div id="kml-layers-map" style="height:300px"></div>
<div id="map-types" style="height:300px"></div>
<div id="overlay-map-types" style="height:300px"></div>
<div id="panoramas-map" style="height:300px"></div>
<div id="foursquare-map" style="height:300px"></div>

# Victor Maps

<div id="world-map-light-gdp" style="height: 400px"></div>
<div id="world-map-dark-gdp" style="height: 400px"></div>
<div id="world-map-markers-light" style="height: 400px"></div>
<div id="world-map-markers-dark" style="height: 400px"></div>
<div id="us-aea-map-light" style="height: 400px"></div>
<div id="us-aea-map-dark" style="height: 400px"></div>

# Fonts settings

# Fonts settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.
body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; } // or whatever you want (e.g. "lato")

Also you can use Google Font and connect it to your website.

  1. Go to: http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/style.css file on body tag instead of the default (e.g. font-family: 'Open Sans', Arial, Helvetica, sans-serif; )

# Source & Credit