Metrical - Multipurpose Bootstrap4 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: ColorlibCode
  • Version: 1.8
  • Contact: Support
# Template Features

Metrical 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 Metrical:

  • HTML5 & CSS3
  • Fully Responsive Design
  • Clean and Valid Code
  • Built with Bootstrap 4.x.x
  • 70+ Pre-made HTML5 Pages
  • 50+ UI Components
  • 20+ Widgets
  • Multiple Layouts Options
  • 15 Email Templates
  • Lightweight and Super Fast
  • Developer friendly code
  • Drag and Drop File Uploader
  • Custom Checkbox & Radio Buttons
  • Easy to Customize
  • Cross Browser Compatibility
  • Multiple Color Variations
  • Login, Sign Up, and Lock Screen pages
  • Lifetime Free Updates
  • 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
  • Metrical
    • light
      • Assets
        • CSS
        • Images
        • JS
        • Plugins (40+ plugins)
      • index.html (70+ html files)
    • dark
      • Assets
        • CSS
        • Images
        • JS
        • Plugins (40+ plugins)
      • index.html (70+ html files)
    • email-templates
      • Account Templates
      • Launch Templates
      • Marketing Templates
      • Images (img)
    • documentation
      • documentation.html
      • changelog.html
# 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">
      <!-- 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>Sales Monitoring | Metrical - 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/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=""></script>
      <script src=""></script>
# Content Structure
 <!-- Page Content Start -->
 <div class="page-content">
	<!-- Page Header Start -->
	<div class="page-header">

	   <nav class="navbar navbar-default">
		  <!-- Brand and Logo Start -->
		  <div class="navbar-header">

		  <!--/ Brand and Logo End -->
		  <!-- Header Right Start -->
		  <div class="header-right pull-right">
		  <!--/ Header Right End -->
	<!--/ Page Header End -->   
	<!-- Page Inner Start -->
	<div class="page-inner">
	   <!-- Main Wrapper -->
	   <div id="main-wrapper">
		  <!-- Breadcrumb Start -->
		  <div class="pageheader pd-t-25 pd-b-35">
			 <div class="pd-t-5 pd-b-5">
				<h1 class="pd-0 mg-0 tx-20">Sales Monitoring</h1>
			 <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="">Dashboard</a>
				<span class="breadcrumb-item active">Sales Monitoring</span>
		  <!--/ Breadcrumb End -->
	   <!--/ Main Wrapper End -->
	<!--/ Page Inner End -->
	<!-- Page Footer Start -->	
	<footer class="page-footer">
	   <div class="pd-t-4 pd-b-0 pd-x-20">
		  <div class="tx-10 tx-uppercase">
			 <p class="pd-y-10 mb-0">Copyright© 2019 | All rights reserved. | Created By <a href="">Metrical</a></p>
	<!--/ Page Footer End -->		
 <!--/ Page Content End -->
# Card Options
<div class="card mg-b-30">
   <div class="card-header">
	  <h4 class="card-header-title">
		 Last Month Summary
	  <div class="card-header-btn">
		 <a  href="#" data-toggle="collapse" class="btn card-collapse" data-target="#collapse9" aria-expanded="true"><i class="ion-ios-arrow-down"></i></a>
		 <a href="#" data-toggle="refresh" class="btn card-refresh"><i class="ion-android-refresh"></i></a>
		 <a href="#" data-toggle="expand" class="btn card-expand"><i class="ion-android-expand"></i></a>
		 <a href="#" data-toggle="remove" class="btn card-remove"><i class="ion-ios-trash-outline"></i></a>
   <div class="card-body" id="collapse9">
	  <div class="row">
		 <div class="col-sm-6 pd-r-20">
			<p class="tx-26 mg-b-5">45%</p>
			<div class="progress mg-b-10 ht-5">
			   <div class="progress-bar bg-danger wd-45p" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
			<p class="tx-13">Nulla consequat massa quis enim. Donec pede justo, fringilla vel...</p>
			<p class="tx-11 lh-3 mg-b-0">You can also use other progress variant found in <a href="#">progress section</a></p>
		 <div class="col-sm-6 mg-t-20 mg-sm-t-0 d-flex align-items-end justify-content-center">
			<span id="summyBarChart2">7,8,10,7,5,9,10,6,9,5,9,5,9,10,9,10,6,6,9,4,7,5,9,10,8</span>
# Buttons Options
<div class="button-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
# Charts Options
Charts Where to find it's CSS Where to find it's JS
Apex Chart assets/plugins/apex-chart/apexcharts.css assets/plugins/apex-chart/apexcharts.min.js
Google Chart assets/plugins/google-chart/google-chart.min.js
Morris Chart assets/plugins/morris/morris.min.css assets/plugins/morris/morris.min.js
ChartJS Chart assets/plugins/chartjs/chartjs.js
Flot Chart assets/plugins/flot/jquery.flot.js
Chartlist Chart assets/plugins/chartist/chartist.css assets/plugins/chartist/chartist.js
Sparkline Chart assets/plugins/sparkline/sparkline.min.js
# Forms Options
    <div class="form-group">
        <label for="exampleInputEmail1">User Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
    <div class="form-group">
        <div class="checkbox checkbox-success">
            <input id="checkbox1" type="checkbox">
            <label for="checkbox1"> Remember me </label>
    <button type="submit" class="btn btn-success m-r-10">Submit</button>
    <button type="submit" class="btn btn-inverse waves-effect waves-light">Cancel</button>
# Tables Options
<table class="table table-responsive-sm">
	   <th>First Name</th>
	   <th>Last Name</th>
	   <th scope="row">1</th>
	   <th scope="row">2</th>
	   <th scope="row">3</th>
	   <td>the Bird</td>
	   <th scope="row">4</th>
	   <th scope="row">5</th>
	   <td>the Bird</td>

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

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: 'IBM Plex Sans', sans-serif; } // or whatever you want (e.g. "lato")

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

  1. Go to:
  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: 'IBM Plex Sans', sans-serif; )
# Source & Credit