Introduction


WrapAdmin is a powerful, responsive, and high-performance admin template. It's based on Bootstrap and contains a lot of Components to easily make an admin, dashboard. This template comes with a simple yet beautiful design which focused on ease of use for users. Efficiently expedite equity invested products rather than extensive outsourcing. Holisticly deliver principle centered imperatives after.

WrapAdmin is fully based on SASS pre-processor css language, includes 140+ commented SCSS files. Each file corresponds to a single component, layout, page, plugin or extension – so you can easily find necessary piece of code and edit it for your needs. The package includes both normal and minified CSS files, compiled from SCSS.


Here is only a small list of available features of in the WrapAdmin.
  • HTML5 & CSS3
  • Clean and GPU Accelerated
  • Built with Bootstrap 4
  • Grunt Tasks
  • 120+ Pages
  • 500+ UI Components
  • 100+ Widgets
  • Lightweight and Super Fast
  • Fully Responsive Pages
  • Developer friendly code
  • Awesome Documentation and Support
  • SCSS Files Included
  • Easy to Customize
  • 12 Color Variations
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
  • Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)
  • Solve bug in your implemented template
NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

Layout options


With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 12 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

You can find assets/js/src/app.init.js file from here.

assets/js/src/app.init.js

Folder Structure


we follow simple structure for the template


wrapadmin/
	├── assets/
			└── css/
			└── data/
			└── fonts/
			└── images/
			└── js/
			└── vendor/
	├── doc/
	
	
					

Page Structure


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="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">
		<meta name="keywords" content="dashboard, admin, admin template, backend template, dashboard, lightweight admin, responsive admin, responsive dashboard, webapp, admin angular, angular, application, html5, jquery, rails, vue">
		<title> WrapAdmin :|: Multipurpose Bootstrap4 Admin Template </title>
		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
		<!-- Styles -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="../assets/css/style.min.css" rel="stylesheet">
		<!-- Favicons -->
		<link rel="icon" href="../assets/images/favicon.ico" type="image/x-icon">
		<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
						
						

Preloader (spinner)


This is for the loader when page load


<!-- Start Preloader -->
<div class="preloader">
	<div class="spinner-dots m-t-30">
		<p><img class="zmdi-hc-spin" src="../assets/images/icon-logo-black.png" width="48" height="48" alt="sQuare"></p>
		<p>Please Wait</p>
		<span class="dot1"></span>
		<span class="dot2"></span>
		<span class="dot3"></span>
		<span class="dot4"></span>
		<span class="dot5"></span>       
	</div>
</div>
						

Logo


This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload


<!-- Logo -->
<header class="wa-sidebar-header">
	<a class="wa-logo-icon" href="index.html"><img src="../assets/images/icon-logo-light.png" alt="..."></a>
	<span class="logo">
	<a href="../index.html"><img src="../assets/images/logo-small.png" alt="logo"></a>
	</span>
</header>
						

Left Sidebar


We have created leftsidebar with the following code.


<!-- Start Sidebar -->
<aside class="sidebar sidebar-icons-boxed sidebar-expand-lg">
	<!-- Logo -->
	<header class="wa-sidebar-header">
		<a class="wa-logo-icon" href="index.html"><img src="assets/images/icon-logo-light.png" alt="..."></a>
		<span class="logo">
		<a href="index.html"><img src="assets/images/logo-small.png" alt="logo"></a>
		</span>
	</header>
	<!-- Start Navigation -->
	<nav class="sidebar-navigation">
		<ul class="menu menu-xs menu-bordery">
			<li class="menu-category">Main</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-home"></span>
				<span class="title">Dashboard</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="index.html">
						<span class="square"></span>
						<span class="title">Dashboard v-1</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="index2.html">
						<span class="square"></span>
						<span class="title">Dashboard v-2</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="index3.html">
						<span class="square"></span>
						<span class="title">Dashboard v-3</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="menu-category">Components</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon ti-layout"></span>
				<span class="title">Layout</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="topbar.html">
						<span class="square"></span>
						<span class="title">Topbar</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="header.html">
						<span class="square"></span>
						<span class="title">Header</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="grid.html">
						<span class="square"></span>
						<span class="title">Grid</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="aside.html">
						<span class="square"></span>
						<span class="title">Aside</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="sidebar.html">
						<span class="square"></span>
						<span class="title">Sidebar</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="card.html">
						<span class="square"></span>
						<span class="title">Card</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="quickview.html">
						<span class="square"></span>
						<span class="title">Quickview</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="footer.html">
						<span class="square"></span>
						<span class="title">Footer</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-align-left"></span>
				<span class="title">Content</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="typography.html">
						<span class="square"></span>
						<span class="title">Typography</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="colors.html">
						<span class="square"></span>
						<span class="title">Colors</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="icons.html">
						<span class="square"></span>
						<span class="title">Icons</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="images.html">
						<span class="square"></span>
						<span class="title">Images</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="media.html">
						<span class="square"></span>
						<span class="title">Media</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="tables.html">
						<span class="square"></span>
						<span class="title">Tables</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="code.html">
						<span class="square"></span>
						<span class="title">Code</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="utilities.html">
						<span class="square"></span>
						<span class="title">Utilities</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-plus-circle"></span>
				<span class="title">Extention</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="ajax-loader.html">
						<span class="square"></span>
						<span class="title">Ajax</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="pace.html">
						<span class="square"></span>
						<span class="title">Pace</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="tour.html">
						<span class="square"></span>
						<span class="title">Tour</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="animation.html">
						<span class="square"></span>
						<span class="title">Animation</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="fullscreen.html">
						<span class="square"></span>
						<span class="title">Fullscreen</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="vuejs.html">
						<span class="square"></span>
						<span class="title">JS Framework</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon ti-ruler-pencil"></span>
				<span class="title">UI Kit</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="buttons.html">
						<span class="square"></span>
						<span class="title">Buttons</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="badges.html">
						<span class="square"></span>
						<span class="title">Badges</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="dropdown.html">
						<span class="square"></span>
						<span class="title">Dropdown</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="dialog.html">
						<span class="square"></span>
						<span class="title">Dialogs</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="nav.html">
						<span class="square"></span>
						<span class="title">Nav</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="misc-bootstrap.html">
						<span class="square"></span>
						<span class="title">Misc</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="progressbar.html">
						<span class="square"></span>
						<span class="title">Progress</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="timeline.html">
						<span class="square"></span>
						<span class="title">Timeline</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="carousel.html">
						<span class="square"></span>
						<span class="title">Carousel</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="notification.html">
						<span class="square"></span>
						<span class="title">Notifications</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="panel-tab.html">
						<span class="square"></span>
						<span class="title">Tabs & Accordion</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-check-square"></span>
				<span class="title">Forms</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="input.html">
						<span class="square"></span>
						<span class="title">Inputs</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="control-checkbox.html">
						<span class="square"></span>
						<span class="title">Controls</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="picker-select.html">
						<span class="square"></span>
						<span class="title">Pickers</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="editor-summernote.html">
						<span class="square"></span>
						<span class="title">Editor</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="upload.html">
						<span class="square"></span>
						<span class="title">Upload</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="addons.html">
						<span class="square"></span>
						<span class="title">Addons</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="lookup.html">
						<span class="square"></span>
						<span class="title">Lookup</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="publisher.html">
						<span class="square"></span>
						<span class="title">Publisher</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="layout.html">
						<span class="square"></span>
						<span class="title">Layouts</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="mask.html">
						<span class="square"></span>
						<span class="title">Mask</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="wizard.html">
						<span class="square"></span>
						<span class="title">Wizard</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="validation.html">
						<span class="square"></span>
						<span class="title">Validation</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-pie-chart"></span>
				<span class="title">Charts</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="chartjs.html">
						<span class="square"></span>
						<span class="title">Chartjs</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="peity.html">
						<span class="square"></span>
						<span class="title">Peity</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="morris.html">
						<span class="square"></span>
						<span class="title">Morris</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="sparkline.html">
						<span class="square"></span>
						<span class="title">Sparkline</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="easypiechart.html">
						<span class="square"></span>
						<span class="title">Easy pie chart</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="menu-category">Pages</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-puzzle-piece"></span>
				<span class="title">Widgets</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="statistic.html">
						<span class="square"></span>
						<span class="title">Statistic</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="list.html">
						<span class="square"></span>
						<span class="title">List</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="social.html">
						<span class="square"></span>
						<span class="title">Social</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="chart.html">
						<span class="square"></span>
						<span class="title">Chart</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="blog.html">
						<span class="square"></span>
						<span class="title">Blog</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="app.html">
						<span class="square"></span>
						<span class="title">App</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="form.html">
						<span class="square"></span>
						<span class="title">Form</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon ti-layout-grid3-alt"></span>
				<span class="title">Apps</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="chat.html">
						<span class="square"></span>
						<span class="title">Chat</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="users.html">
						<span class="square"></span>
						<span class="title">Users</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="mailbox.html">
						<span class="square"></span>
						<span class="title">Mailbox</span>
						<span class="badge badge-pill badge-primary">4</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="calendar.html">
						<span class="square"></span>
						<span class="title">Calendar</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-file"></span>
				<span class="title">Pages</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="gallery.html">
						<span class="square"></span>
						<span class="title">Gallery</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="maps.html">
						<span class="square"></span>
						<span class="title">Map</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="invoice.html">
						<span class="square"></span>
						<span class="title">Invoice</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="profile.html">
						<span class="square"></span>
						<span class="title">Profile</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="userlist.html">
						<span class="square"></span>
						<span class="title">User list</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="pricing.html">
						<span class="square"></span>
						<span class="title">Pricing</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="search.html">
						<span class="square"></span>
						<span class="title">Search result</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="faq.html">
						<span class="square"></span>
						<span class="title">FAQ</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-files-o"></span>
				<span class="title">Extras</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="user-login.html">
						<span class="square"></span>
						<span class="title">Login</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="user-register.html">
						<span class="square"></span>
						<span class="title">Register</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="user-pass.html">
						<span class="square"></span>
						<span class="title">Forget pass</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="user-lock.html">
						<span class="square"></span>
						<span class="title">Lock screen</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../error-404.html">
						<span class="square"></span>
						<span class="title">Error-404 pages</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../error-403.html">
						<span class="square"></span>
						<span class="title">Error-403 pages</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../error-500.html">
						<span class="square"></span>
						<span class="title">Error-500 pages</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../error-503.html">
						<span class="square"></span>
						<span class="title">Error-503 pages</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="blank.html">
						<span class="square"></span>
						<span class="title">Blank page</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="maintenance.html">
						<span class="square"></span>
						<span class="title">Maintenance</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="coming-soon.html">
						<span class="square"></span>
						<span class="title">Coming Soon</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="coming-soon-1.html">
						<span class="square"></span>
						<span class="title">Coming Soon</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="coming-soon-2.html">
						<span class="square"></span>
						<span class="title">Coming Soon</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="coming-soon-3.html">
						<span class="square"></span>
						<span class="title">Coming Soon</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="wa-menu-item">
				<a class="wa-menu-link" href="email.html">
				<span class="icon fa fa-envelope"></span>
				<span class="title">Emails</span>
				</a>
			</li>
			<li class="menu-divider"></li>
			<li class="wa-menu-item open">
				<a class="wa-menu-link" href="#">
				<span class="icon fa fa-question-circle"></span>
				<span class="title">Help</span>
				<span class="arrow"></span>
				</a>
				<ul class="menu-submenu">
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../doc/faq.html">
						<span class="square"></span>
						<span class="title">FAQ</span>
						</a>
					</li>
					<li class="wa-menu-item">
						<a class="wa-menu-link" href="../doc/changelog.html">
						<span class="square"></span>
						<span class="title">Changelog</span>
						</a>
					</li>
					<li class="wa-menu-item active">
						<a class="wa-menu-link" href="../doc/doc.html">
						<span class="square"></span>
						<span class="title">Documentation</span>
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<!-- End Navigation -->
</aside>
<!-- End Sidebar -->

Page Content, Footer and Quickview


Below is the code for the page content content, you can start your content here


<!-- Start Main container -->
<main>
	<!-- Start Main Content -->
	<div class="main-content">
		<div class="row">
			<!-- User & Earnings Statistic -->
			<div class="col-md-3">
				<div class="card card-body">
					<div class="flexbox">
						<div data-provide="sparkline" data-type="bar" data-bar-color="#8b6ea7">1,4,3,7,6,4,8,9,6,8,12</div>
						<div class="text-right">
							<span class="fw-400">New Users</span><br>
							<span>
							<i class="ti-angle-up text-success"></i>
							<span class="fs-18 ml-1">1013</span>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card card-body">
					<div class="flexbox">
						<div data-provide="sparkline" data-type="bar" data-bar-color="#f2a654">1,4,7,6,4,8,6,12</div>
						<div class="text-right">
							<span class="fw-400">Monthly Sales</span><br>
							<span>
							<i class="ti-angle-up text-success"></i>
							<span class="fs-18 ml-1">90%</span>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card card-body">
					<div class="flexbox">
						<div data-provide="sparkline" data-type="bar" data-bar-color="#000000">1,4,3,7,6,4,8,9,6,8,12</div>
						<div class="text-right">
							<span class="fw-400">Monthly Users</span><br>
							<span>
							<i class="ti-angle-up text-success"></i>
							<span class="fs-18 ml-1">80%</span>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card card-body">
					<div class="flexbox">
						<div data-provide="sparkline" data-type="bar" data-bar-color="#88caf9">1,4,3,7,6,4,8,9,6,8,12</div>
						<div class="text-right">
							<span class="fw-400">Impressions</span><br>
							<span>
							<i class="ti-angle-up text-success"></i>
							<span class="fs-18 ml-1">85%</span>
							</span>
						</div>
					</div>
				</div>
			</div>
			<!-- Main Analytics -->
			<div class="col-md-9">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title">Analytics</h5>
						<a class="btn btn-xs btn-secondary" href="index.html">More Charts</a>
					</div>
					<div class="card-body">
						<ul class="list-inline text-center gap-items-4 mb-30">
							<li class="list-inline-item">
								<span class="badge badge-lg badge-ring mr-1" style="background-color: #b1bccb"></span>
								<span>Stater</span>
							</li>
							<li class="list-inline-item">
								<span class="badge badge-lg badge-ring mr-1" style="background-color: #f9b9d0"></span>
								<span>Individual</span>
							</li>
							<li class="list-inline-item">
								<span class="badge badge-lg badge-ring mr-1" style="background-color: #c4aae1"></span>
								<span>Business</span>
							</li>
						</ul>
						<div id="morris-area" data-provide="morris"></div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title">Top Advertisers</h5>
						<ul class="card-controls">
							<li class="dropdown">
								<a data-toggle="dropdown" href="#"><i class="ti-more-alt rotate-90"></i></a>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item active" href="#">Today</a>
									<a class="dropdown-item" href="#">Yesterday</a>
									<a class="dropdown-item" href="#">Last week</a>
									<a class="dropdown-item" href="#">Last month</a>
								</div>
							</li>
							<li>
								<a class="card-btn-reload" href="#" title="Refresh" data-provide="tooltip"><i class="fa fa-circle-thin"></i></a>
							</li>
						</ul>
					</div>
					<div class="card-body card-body">
						<ul class="list-inline mb-0">
							<li class="flexbox mb-1" style="color: #dd4d42">
								<div>
									<i class="ti-google"></i>
									<span>Google</span>
								</div>
								<div>953</div>
							</li>
							<li class="flexbox mb-1" style="color: #2a5297">
								<div >
									<i class="ti-facebook"></i>
									<span>Facebook</span>
								</div>
								<div>1420</div>
							</li>
							<li class="flexbox" style="color: #de2f7e">
								<div>
									<i class="ti-instagram"></i>
									<span>Instagram</span>
								</div>
								<div>846</div>
							</li>
							<li class="flexbox" style="color: #00aced">
								<div>
									<i class="ti-twitter"></i>
									<span>Twitter</span>
								</div>
								<div>751</div>
							</li>
							<li class="flexbox mb-1" style="color: #bd081b">
								<div>
									<i class="ti-pinterest"></i>
									<span>Pinterest</span>
								</div>
								<div>584</div>
							</li>
							<li class="flexbox mb-1" style="color: #0274b3">
								<div>
									<i class="ti-linkedin"></i>
									<span>LinkedIn</span>
								</div>
								<div>485</div>
							</li>
							<li class="flexbox mb-1" style="color: #ea4c89">
								<div>
									<i class="ti-dribbble"></i>
									<span>Dribbble</span>
								</div>
								<div>462</div>
							</li>
							<li class="flexbox mb-1" style="color: #444444">
								<div>
									<i class="ti-tumblr-alt"></i>
									<span>Tumblr</span>
								</div>
								<div>354</div>
							</li>
							<li class="flexbox mb-1" style="color: #e0135d">
								<div >
									<i class="ti-flickr"></i>
									<span>Flickr</span>
								</div>
								<div>140</div>
							</li>
							<li class="flexbox" style="color: #999999">
								<div>
									<i class="ti-github"></i>
									<span>Github</span>
								</div>
								<div>86</div>
							</li>
							<li class="flexbox" style="color: #000000">
								<div>
									<i class="ti-dropbox"></i>
									<span>Dropbox</span>
								</div>
								<div>51</div>
							</li>
							<li class="flexbox mb-1" style="color: #7514e2">
								<div>
									<i class="ti-yahoo"></i>
									<span>Yahoo</span>
								</div>
								<div>54</div>
							</li>
							<li class="flexbox mb-1" style="color: #0274b3">
								<div>
									<i class="ti-trello"></i>
									<span>Trello</span>
								</div>
								<div>45</div>
							</li>
							<li class="flexbox mb-1" style="color: #555555">
								<div>
									<i class="ti-reddit"></i>
									<span>Reddit</span>
								</div>
								<div>462</div>
							</li>
							<li class="flexbox mb-1" style="color: #ff0000">
								<div>
									<i class="ti-youtube"></i>
									<span>YouTube</span>
								</div>
								<div>354</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- Earnings & Sells -->
			<div class="col-lg-6">
				<div class="card">
					<h4 class="card-title">Earnings</h4>
					<div class="card-body">
						<ul class="list-inline text-center gap-items-4 mb-30">
							<li class="list-inline-item">
								<span class="badge badge-lg badge-ring mr-1" style="background-color: #000000"></span>
								<span>Advertising</span>
							</li>
							<li class="list-inline-item">
								<span class="badge badge-lg badge-ring mr-1" style="background-color: #01c4cc"></span>
								<span>Hosting</span>
							</li>
						</ul>
						<div id="morris-sample-2" data-provide="morris"></div>
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="card">
					<h4 class="card-title">Sells</h4>
					<div class="card-body">
						<ul class="list-inline text-center gap-items-4 mb-30">
							<li class="list-inline-item">
								<span class="badge badge-ring mr-1" style="background-color: #9966ff"></span>
								<span>Individual</span>
							</li>
							<li class="list-inline-item">
								<span class="badge badge-ring mr-1" style="background-color: #4bc0c0"></span>
								<span>Startup</span>
							</li>
							<li class="list-inline-item">
								<span class="badge badge-ring mr-1" style="background-color: #ff9f40"></span>
								<span>Business</span>
							</li>
						</ul>
						<div id="morris-sample-1" data-provide="morris"></div>
					</div>
				</div>
			</div>
			<!-- Transactions -->
			<div class="col-md-4">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title"><strong>Last Sales</strong></h5>
						<select data-provide="selectpicker" data-width="140">
							<option>Today</option>
							<option>Yesterday</option>
							<option>Last week</option>
							<option>Last month</option>
						</select>
					</div>
					<div class="card-body bl-3 border-success flexbox flex-justified">
						<div>
							<div class="fs-12 text-muted"><i class="ti-time mr-1"></i> 24 hours</div>
							<div class="fs-18 text-success">26 Sales</div>
						</div>
						<div>
							<div class="fs-12 text-muted"><i class="ti-time mr-1"></i> 7 days</div>
							<div class="fs-18 text-danger">134 Sales</div>
						</div>
						<div class="fs-40 fw-100 text-right pr-2 text-success">$106</div>
					</div>
					<table class="table table-striped table-hover">
						<tbody>
							<tr>
								<td><a class="hover-info" href="#">Lorem Ipsum is simply dummy text of the printing</a></td>
								<td class="text-muted w-80px">21:53</td>
								<td class="text-success fw-500 w-80px">+ $19</td>
							</tr>
							<tr>
								<td><a class="hover-info" href="#">Lorem Ipsum is simply dummy text of the printing</a></td>
								<td class="text-muted w-80px">20:15</td>
								<td class="text-success fw-500 w-80px">+ $21</td>
							</tr>
							<tr>
								<td><a class="hover-info" href="#">Lorem Ipsum is simply dummy text of the printing</a></td>
								<td class="text-muted w-80px">17:09</td>
								<td class="text-success fw-500 w-80px">+ $18</td>
							</tr>
							<tr>
								<td><a class="hover-info" href="#">Lorem Ipsum is simply dummy text of the printing</a></td>
								<td class="text-muted w-80px">14:36</td>
								<td class="text-success fw-500 w-80px">+ $16</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title"><strong>Last Sales</strong></h5>
						<a class="btn btn-xs btn-light" href="#">See all</a>
					</div>
					<table class="table table-striped table-hover table-responsive">
						<thead>
							<tr>
								<th>ID</th>
								<th>Plan</th>
								<th>User</th>
								<th>Price</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>Individual</td>
								<td><a class="hover-primary" href="#">Ranian</a></td>
								<td>$9</td>
								<td>25 July</td>
							</tr>
							<tr>
								<td>2</td>
								<td>Individual</td>
								<td><a class="hover-primary" href="#">Makein</a></td>
								<td>$9</td>
								<td>21 July</td>
							</tr>
							<tr>
								<td>3</td>
								<td>Business</td>
								<td><a class="hover-primary" href="#">Suhan</a></td>
								<td>$19</td>
								<td>16 July</td>
							</tr>
							<tr>
								<td>4</td>
								<td>Individual</td>
								<td><a class="hover-primary" href="#">Inamu</a></td>
								<td>$9</td>
								<td>12 June</td>
							</tr>
							<tr>
								<td>5</td>
								<td>Enterprise</td>
								<td><a class="hover-primary" href="#">Finak</a></td>
								<td>$49</td>
								<td>09 Jan</td>
							</tr>
							<tr>
								<td>6</td>
								<td>Business</td>
								<td><a class="hover-primary" href="#">Kurady</a></td>
								<td>$19</td>
								<td>20 Dec 2015</td>
							</tr>
							<tr>
								<td>7</td>
								<td>Enterprise</td>
								<td><a class="hover-primary" href="#">Suhan</a></td>
								<td>$19</td>
								<td>20 Dec 2015</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title">Earnings Statistics</h5>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-7">Total sales</div>
							<div class="col-5">
								<span class="text-big">10,32</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Income amount</div>
							<div class="col-5">
								<span class="text-big">$1,54</span>
								<sup class="text-danger">-5%</sup>
							</div>
							<div class="col-7">Total budget</div>
							<div class="col-5">
								<span class="text-big">$10,54</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Page views</div>
							<div class="col-5">
								<span class="text-big">21,33</span>
								<sup class="text-danger">-12%</sup>
							</div>
							<div class="col-7">Completed Project</div>
							<div class="col-5">
								<span class="text-big">10</span>
								<sup class="text-success">+1%</sup>
							</div>
							<div class="col-7">Completed tasks</div>
							<div class="col-5">
								<span class="text-big">12</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Total Pending</div>
							<div class="col-5">
								<span class="text-big">10,32</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Income Pending</div>
							<div class="col-5">
								<span class="text-big">$1,54</span>
								<sup class="text-danger">-5%</sup>
							</div>
							<div class="col-7">Sells Penging </div>
							<div class="col-5">
								<span class="text-big">21,33</span>
								<sup class="text-danger">-12%</sup>
							</div>
							<div class="col-7">Completed tasks</div>
							<div class="col-5">
								<span class="text-big">12</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Total Pending</div>
							<div class="col-5">
								<span class="text-big">10,32</span>
								<sup class="text-success">+12%</sup>
							</div>
							<div class="col-7">Income Pending</div>
							<div class="col-5">
								<span class="text-big">$1,54</span>
								<sup class="text-danger">-5%</sup>
							</div>
							<div class="col-7">Sells Penging </div>
							<div class="col-5">
								<span class="text-big">21,33</span>
								<sup class="text-danger">-12%</sup>
							</div>
							<div class="col-7">Pending Tasks</div>
							<div class="col-5">
								<span class="text-big">12</span>
								<sup class="text-success">+12%</sup>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Author Profile -->
			<div class="col-md-6 col-lg-4">
				<div class="card p-30 pt-50 text-center">
					<div>
						<a class="avatar avatar-xxl status-success mb-3" href="profile.html">
						<img src="assets/images/avatar/default.png" alt="...">
						</a>
					</div>
					<h5><a href="profile.html">Piter Jackson</a></h5>
					<p><small class="fs-16">Professional Designer & Developer</small></p>
					<p class="text-light fs-12 mb-30">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
					<div class="gap-items fs-16">
						<a class="text-facebook" href="#"><i class="fa fa-facebook"></i></a>
						<a class="text-linkedin" href="#"><i class="fa fa-linkedin"></i></a>								
						<a class="text-google" href="#"><i class="fa fa-google"></i></a>
						<a class="text-dribbble" href="#"><i class="fa fa-dribbble"></i></a>
						<a class="text-twitter" href="#"><i class="fa fa-twitter"></i></a>
					</div>
				</div>
			</div>
			<!-- Author Friends -->
			<div class="col-md-6 col-lg-4">
				<div class="card">
					<h5 class="card-title">Friends</h5>
					<div class="media-list media-list-sm media-list-hover media-list-divided scrollable" style="height: 295px">
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-3.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Robert Smith</a></h6>
								<small class="text-fader">Co-Founder</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-outline btn-secondary w-100px" href="#">Followed</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/default.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Piter Jackson</a></h6>
								<small class="text-fader">Co-Founder</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-outline btn-secondary w-100px" href="#">Followed</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-2.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Smith Robert</a></h6>
								<small class="text-fader">Designer</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-success w-100px" href="#">Follow</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-4.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Maria Garcia</a></h6>
								<small class="text-fader">CTO</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-success w-100px" href="#">Follow</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-3.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">David Smith</a></h6>
								<small class="text-fader">Lead Developer</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-outline btn-secondary w-100px" href="#">Followed</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/default.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Maria Rodriguez</a></h6>
								<small class="text-fader">Senior Developer</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-success w-100px" href="#">Follow</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-4.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">John Larson</a></h6>
								<small class="text-fader">Front-end Developer</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-success w-100px" href="#">Follow</a>
							</div>
						</div>
						<div class="media media-single">
							<a href="#">
							<img class="avatar" src="assets/images/avatar/avatar-5.png" alt="...">
							</a>
							<div class="media-body">
								<h6><a href="#">Emma Larson</a></h6>
								<small class="text-fader">PHP Guru</small>
							</div>
							<div class="media-right">
								<a class="btn btn-sm btn-bold btn-round btn-success w-100px" href="#">Follow</a>
							</div>
						</div>
					</div>
					<div class="text-center bt-1 border-light p-2">
						<a class="text-default text-uppercase d-block fs-10 fw-500 ls-1" href="#">Invite Friends</a>
					</div>
				</div>
			</div>
			<!-- Social Like Box -->
			<div class="col-lg-4 d-none d-lg-block">
				<div class="flexbox flex-justified text-center bg-white mb-15">
					<div class="no-shrink py-30">
						<span class="ti-facebook fs-40" style="color: #3b5998"></span>
					</div>
					<div class="py-30 bg-lighter" style="background-color: #3b5998 !important; color: #fff;">
						<div class="fs-30">+100</div>
						<span>Likes</span>
					</div>
				</div>
				<div class="flexbox flex-justified text-center bg-white mb-15">
					<div class="no-shrink py-30">
						<span class="ti-twitter fs-40" style="color: #00aced"></span>
					</div>
					<div class="py-30 bg-lighter" style="background-color: #00aced !important; color: #fff;">
						<div class="fs-30">+99</div>
						<span>Followers</span>
					</div>
				</div>
				<div class="flexbox flex-justified text-center bg-white" >
					<div class="no-shrink py-30">
						<span class="ti-dribbble fs-40" style="color: #ea4c89"></span>
					</div>
					<div class="py-30 bg-lighter" style="background-color: #ea4c89 !important; color: #fff;">
						<div class="fs-30">+45</div>
						<span>Shots</span>
					</div>
				</div>
			</div>
			<!-- Blog Posts -->
			<div class="col-12 d-none d-md-block">
				<div class="card">
					<div class="row no-gutters">
						<a class="col-4 bg-img" style="background-image: url(assets/images/gallery/image-md.png)" href="blog.html"></a>
						<div class="col-8">
							<div class="card-body">
								<h5><a class="hover-primary text-uppercase fs-14 fw-500 ls-1" href="blog.html">Quick start - jump into writing code</a></h5>
								<hr class="w-50px ml-0 bt-2 border-pink hr-sm">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
								<div class="flexbox flex-items-middle mt-30">
									<a href="profile.html">
									<img class="avatar avatar-sm" src="assets/images/avatar/avatar-2.png" alt="...">
									<span class="text-default fw-400 ml-2">Piter Jackson</span>
									</a>
									<a href="#">
									<i class="fa fa-heart text-danger fs-11"></i>
									<span class="fs-11 text-fade ml-1">128</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Chat Box -->
			<div class="col-md-6">
				<div class="card card-bordered">
					<div class="card-header">
						<h4 class="card-title">Chat</h4>
						<a class="btn btn-xs btn-secondary" href="chat.html">Chat App</a>
					</div>
					<div class="scrollable" id="chat-content" style="height:400px" data-provide="emoji">
						<div class="media media-chat">
							<img class="avatar" src="assets/images/avatar/default.png" alt="avatar">
							<div class="media-body">
								<p>Hi</p>
								<p>How are you ...???</p>
								<p>What are you doing tomorrow?<br>Would you like to get out of the town for a while?</p>
								<p class="meta"><time datetime="2018">23:58</time></p>
							</div>
						</div>
						<div class="media media-meta-day">Today</div>
						<div class="media media-chat media-chat-reverse">
							<div class="media-body">
								<p>Hiii, I'm good.</p>
								<p>How are you doing?</p>
								<p>Long time no see!</p>
								<p class="meta"><time datetime="2018">00:06</time></p>
							</div>
						</div>
						<div class="media media-chat">
							<img class="avatar" src="assets/images/avatar/default.png" alt="avatar...">
							<div class="media-body">
								<p>Yeah</p>
								<p>We were out of country for a vacation. We visited several beautiful countries and made a lot of memmories. :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:</p>
								<p class="meta"><time datetime="2018">00:07</time></p>
							</div>
						</div>
						<div class="media media-chat media-chat-reverse">
							<div class="media-body">
								<p>That's awesome!</p>
								<p>You should tell me everything with all small details. I'm so curious to hear your stories.</p>
								<p>Did you take pictures?</p>
								<p class="meta"><time datetime="2018">00:09</time></p>
							</div>
						</div>
						<div class="media media-chat">
							<img class="avatar" src="assets/images/avatar/default.png" alt="...">
							<div class="media-body">
								<p>We took a loooot. Here is some of them, I'll show you the rest once we meet :wink:</p>
								<p class="row gap-1" data-provide="photoswipe">
									<a class="col-4 d-inline-block" href="#"><img src="assets/images/gallery/image-sm.png" alt="..."></a>
									<a class="col-4 d-inline-block" href="#"><img src="assets/images/gallery/image-sm.png" alt="..."></a>
									<a class="col-4 d-inline-block" href="#"><img src="assets/images/gallery/image-sm.png" alt="..."></a>
								</p>
								<p class="meta"><time datetime="2018">00:10</time></p>
							</div>
						</div>
						<div class="media media-chat media-chat-reverse">
							<div class="media-body">
								<p>These places are fantastic. Wish I could join you guys :disappointed: :disappointed:</p>
								<p class="meta"><time datetime="2018">00:10</time></p>
							</div>
						</div>
						<div class="media media-chat">
							<img class="avatar" src="assets/images/avatar/default.png" alt="...">
							<div class="media-body">
								<p>You can actually. We are planning our next vacation for new year holidays :wink:</p>
								<p class="meta"><time datetime="2018">00:12</time></p>
							</div>
						</div>
						<div class="media media-chat media-chat-reverse">
							<div class="media-body">
								<p>Are you serious?!! :heart_eyes:</p>
								<p class="meta"><time datetime="2018">00:12</time></p>
							</div>
						</div>
					</div>
					<div class="publisher bt-1 border-light">
						<img class="avatar avatar-xs" src="assets/images/avatar/avatar-2.png" alt="...">
						<input class="publisher-input" type="text" placeholder="Write something">
						<span class="publisher-btn file-group pull-right">
						<i class="fa fa-paperclip file-browser"></i>
						<input type="file">
						</span>
						<a class="publisher-btn pull-right" href="#"><i class="fa fa-smile-o"></i></a>
						<a class="publisher-btn text-info pull-right" href="#"><i class="fa fa-paper-plane"></i></a>
					</div>
				</div>
			</div>
			<!-- To Do List Box -->
			<div class="col-md-6">
				<div class="card card-bordered">
					<h4 class="card-title">Todo list</h4>
					<div class="media-list media-list-hover" data-provide="selectall">
						<header class="media media-single media-list-header">
							<label class="custom-control custom-control-lg custom-checkbox pl-1">
							<input type="checkbox" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							</label>
							<div class="lookup lookup-sm flex-grow-1">
								<input type="text" placeholder="Search..." data-provide="media-search">
							</div>
						</header>
						<div class="media-list-body scrollable" data-provide="sortable" data-sortable-handle=".sortable-square" style="height:344px">
							<div class="media media-single bl-3 border-danger">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Schedule meeting with Bob</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
							<div class="media media-single">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Take children from school</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
							<div class="media media-single">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Final design delivery</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
							<div class="media media-single bl-3 border-warning">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Watch GOT - Episode 6</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
							<div class="media media-single">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Read an article</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
							<div class="media media-single bl-3 border-danger">
								<span class="sortable-square"></span>
								<label class="custom-control custom-control-lg custom-checkbox flex-grow-1">
								<input type="checkbox" class="custom-control-input">
								<span class="custom-control-indicator"></span>
								<span class="custom-control-description strike-on-check">Begin promotional phase</span>
								</label>
								<a class="media-action" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
								<a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
							</div>
						</div>
					</div>
					<div class="publisher bt-1 border-light">
						<input class="publisher-input" type="text" placeholder="Add new task">
						<a class="btn btn-sm btn-secondary pull-right" href="#"><i class="fa fa-paper-plane"></i></a>
					</div>
				</div>
			</div>
			<!-- Location & Impressions -->		
			<div class="col-md-6 col-lg-4">
				<div class="card card-body">
					<div class="flexbox">
						<h6 class="text-uppercase">Analysis</h6>
						<h6><i class="ion-android-arrow-dropup text-success fs-18 mr-1"></i> %20</h6>
					</div>
					<ul class="flexbox flex-justified text-center my-40">
						<li class="br-1 border-light">
							<div class="fs-18">953</div>
							<small>New York</small>
						</li>
						<li class="br-1 border-light">
							<div class="fs-18">813</div>
							<small>Los Angeles</small>
						</li>
						<li>
							<div class="fs-18">369</div>
							<small>Dallas</small>
						</li>
					</ul>
					<div data-provide="sparkline" data-width="100%" data-height="80" data-line-color="#4bc0c0" data-fill-color="#4bc0c0" data-min-spot-color="false" data-max-spot-color="false" data-highlight-spot-color="false" data-highlight-line-color="#fff">1,3,5,4,6,8,7,9,7,8,10,16,14,10</div>
				</div>
			</div>					
			<div class="col-md-6 col-lg-4">
				<div class="card card-body">
					<div class="flexbox">
						<h6 class="text-uppercase">Analysis</h6>
						<h6><i class="ion-android-arrow-dropup text-success fs-18 mr-1"></i> %20</h6>
					</div>
					<ul class="flexbox flex-justified text-center my-40">
						<li class="br-1 border-light">
							<div class="fs-18">%76.58</div>
							<small>All Time</small>
						</li>
						<li class="br-1 border-light">
							<div class="fs-18">%35.12</div>
							<small>Last Month</small>
						</li>
						<li>
							<div class="fs-18">%6.66</div>
							<small>Today</small>
						</li>
					</ul>
					<div class="text-center" data-provide="sparkline" data-type="bar" data-height="80" data-bar-color="#ff9f40">2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8</div>
				</div>
			</div>	
			<div class="col-md-6 col-lg-4">
				<div class="card card-info">
					<div class="card-body text-white pb-12">
						<div class="fs-50 fw-100">6,374</div>
						<p class="lead opacity-80">Increase in page views</p>
					</div>
					<div data-provide="sparkline" data-width="100%" data-height="160" data-line-width="2" data-line-color="#fff" data-fill-color="false" data-min-spot-color="#fff" data-max-spot-color="#fff" data-highlight-spot-color="#fff" data-spot-color="#fff" data-spot-radius="3" data-value-spots="{":99": "#fff"}">1,8,6,5,6,8,7,9,7,8,10,16,14,10</div>
				</div>
			</div>
		</div>
	</div>
	<!--End Main Content -->
	<!-- Start Footer -->
	<footer class="site-footer pt-50 pb-20">
		<div class="row gap-y">
			<div class="col-lg-5">
				<h5 class="text-uppercase fs-14 ls-1">About</h5>
				<p class="text-justify">WrapAdmin is a powerful, responsive, and high-performance admin template. It's based on Bootstrap and contains a lot of Components to easily make an admin, dashboard. This template comes with a simple yet beautiful design which focused on ease of use for users. Efficiently expedite equity invested products rather than extensive outsourcing. Holisticly deliver principle centered imperatives after.</p>
			</div>
			<div class="col-6 col-md-4 col-lg-2 text-left1 text-lg-center1">
				<h5 class="text-uppercase fs-14 ls-1">Company</h5>
				<ul class="nav flex-column">
					<li class="nav-item">
						<a class="nav-link" href="#">About us</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">How it works</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Terms of use</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Privacy policy</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contact us</a>
					</li>
				</ul>
			</div>
			<div class="col-6 col-md-4 col-lg-2 text-left1 text-lg-center1">
				<h5 class="text-uppercase fs-14 ls-1">Support</h5>
				<ul class="nav flex-column">
					<li class="nav-item">
						<a class="nav-link" href="#">Help center</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Tutorials</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Forums</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Official blog</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Ask question</a>
					</li>
				</ul>
			</div>
			<div class="col-md-4 col-lg-3 text-left1 text-lg-center1">
				<h5 class="text-uppercase fs-14 ls-1">Newsletter</h5>
				<p>Subscribe to our newsletter to receive news, updates, and special offers:</p>
				<br>
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Enter your email address">
				</div>
				<button class="btn btn-primary btn-block" type="button"><i class="fa fa-paper-plane"></i> Subscribe</button>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-4">
				<ul class="nav nav-primary nav-dotted nav-square-separated justify-content-center justify-content-md-start">
					<li class="nav-item">
						<a class="nav-link" href="doc/doc.html">Documentation</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="doc/faq.html">FAQ</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="https://themeforest.net/user/ColorLib_Net/?ref=ColorLib_Net" target="_blank">Contact Us</a>
					</li>
				</ul>
			</div>
			<div class="col-md-4">
				<p class="text-center justify-content-center">Copyright © 2018 | All Rights Reserved</p>
			</div>
			<div class="col-md-4">
				<ul class="nav nav-primary justify-content-center justify-content-md-end">
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: #187de8"><i class="ti-facebook"></i></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: #48b0f7"><i class="ti-twitter"></i></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: #e44d42"><i class="ti-google"></i></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: #bd081b"><i class="ti-pinterest"></i></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: #ff0000"><i class="ti-youtube"></i></a>
					</li>
				</ul>
			</div>
		</div>
	</footer>
	<!-- End Footer -->
		
	
</main>
<!-- End Main container -->
<!-- Start Global quickview -->
<div id="qv-global" class="quickview" data-url="assets/data/quickview-global.html">
	<div class="spinner-linear">
		<div class="line"></div>
	</div>
</div>
<!-- End Global quickview -->

Grid Options


See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Card Options


Below is the basic card structure.


<!-- Main Analytics -->
<div class="col-md-9">
	<div class="card">
		<div class="card-header">
			<h5 class="card-title">Analytics</h5>
			<a class="btn btn-xs btn-secondary" href="index.html">More Charts</a>
		</div>
		<div class="card-body">
			<ul class="list-inline text-center gap-items-4 mb-30">
				<li class="list-inline-item">
					<span class="badge badge-lg badge-ring mr-1" style="background-color: #b1bccb"></span>
					<span>Stater</span>
				</li>
				<li class="list-inline-item">
					<span class="badge badge-lg badge-ring mr-1" style="background-color: #f9b9d0"></span>
					<span>Individual</span>
				</li>
				<li class="list-inline-item">
					<span class="badge badge-lg badge-ring mr-1" style="background-color: #c4aae1"></span>
					<span>Business</span>
				</li>
			</ul>
			<div id="morris-area" data-provide="morris"></div>
		</div>
	</div>
</div>

Icons


Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Themify Icons <i class="ti-icon-name"></i>
Material Icons <i class="mdi mdi-icon-name"></i>
Ion icons <i class="ion-icon-name"></i>
7 stroke Icons <i class="pe-7s-icon-name"></i>

Buttons


Below is the general 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>
			   

Free support


If you have any type of query or support needed, please open a support ticket here: Support