Niche Admin - Powerful Bootstrap 4 Dashboard and Admin Template

Documentation Version 1.3

1. Introduction

Niche Admin is a popular open source WebApp template for admin dashboards and control panels. Niche Admin is a fully responsive HTML template that is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Niche Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Author: UXLiner
Contact: uxliner9@gmail.com
website: UXLiner

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.

1.2 Installation

This is the simple static HTML template so it's very easy to install it.

Just simple steps to follow:

Main (demo folder) + dist (folder) = Template Ready.

2. Layout

All layout files have fixed structure consisting of...

Wrapper .wrapper. A div that wraps the whole site.
Main Header .main-header. Contains the logo and navbar.
Sidebar .sidebar-wrapper. Contains the user panel and sidebar menu.
Content .content-wrapper. Contains the page header and content.
Footer .main-footer. Contains the copywrite.

Tip!

The starter page is a good place to start building your app if you'd like to start from scratch.

2.2. Layout Options

Main Layout
Boxed Layout
Dark Layout
Horizontal Menu Layout
Minimal Layout
Minisidebar Layout
RTL Layout

3. Beginning of Page

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 http-equiv="X-UA-Compatible" content="IE=edge">
<!title>Niche Admin - Powerful Bootstrap 4 Dashboard and Admin Template</title>
<!!-- Tell the browser to be responsive to screen width -->
<!meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<!!-- v4.0.0-alpha.6 -->
<!link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css">

<!!-- Google Font -->
<!link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">

<!!-- Theme style -->
<!link rel="stylesheet" href="dist/css/style.css">
<!link rel="stylesheet" href="dist/css/font-awesome/css/font-awesome.min.css">
<!link rel="stylesheet" href="dist/css/et-line-font/et-line-font.css">
<!link rel="stylesheet" href="dist/css/themify-icons/themify-icons.css">

<!!-- Chartist CSS -->
<!link rel="stylesheet" href="dist/plugins/chartist-js/chartist.min.css">
<!link rel="stylesheet" href="dist/plugins/chartist-js/chartist-init.css">
<!link rel="stylesheet" href="dist/plugins/chartist-js/chartist-plugin-tooltip.css">

<!!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<!script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!![endif]-->

<!/head>

4. 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 --> 
    <a href="index.html" class="logo blue-bg"> 
    <!-- mini logo for sidebar mini 50x50 pixels --> 
    <span class="logo-mini">

5. Left Sidebar

The sidebar used in this page to the left provides an example of what your sidebar should like. Construction of a sidebar:

<!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar"> 
    <!-- sidebar: style can be found in sidebar.less -->
    <div class="sidebar"> 
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="image text-center"><img src="dist/img/img1.jpg" class="img-circle" alt="User Image"> </div>
        <div class="info">
          <p>Alexander Pierce</p>
          <a href="#"><i class="fa fa-cog"></i></a> <a href="#"><i class="fa fa-envelope-o"></i></a> <a href="#"><i class="fa fa-power-off"></i></a> </div>
      </div>
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">PERSONAL</li>
        <li class="active treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html">Dashboard 1</a></li>
            <li><a href="index2.html">Dashboard 2</a></li>
            <li><a href="index3.html">Dashboard 3</a></li>
            <li><a href="index4.html">Dashboard 4</a></li>
         </ul>
        </li>
      </ul>
    </div>
    <!-- /.sidebar --> 
  </aside>

6. Font Family

We have used google fonts for the template you can change whatever font you wish

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">

<!-- css -->

body {
	font-family: 'Poppins', sans-serif;
}

7. Icons

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

Icon Name	Example
Font-awesome	`<i class="fa fa-icon-name"></i>`
Linea Icons	`<div data-icon="a" class="linea-icon linea-basic"><div>`
Simple Line Icons	`<i class="icon-name_of_icon"></i>`
Themify Icons	`<i class="ti-icon-name"></i>`
Weather Icons	`<i class="wi wi-icon-name"></i>`
Flag Icons	`<i class="flag-icon flsg-icon-country-name"></i>`

8. Buttons

Below is the general buttons.

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

9. Charts

Below is the table of pages which includes charts and where you can find the script related to it.

Page	Where to find it's JS
`index.html` (dashboard1)	`dist/plugins/function/dashboard1.js`
`index2.html` (dashboard2)	`dist/plugins/function/dashboard2.js`
`index3.html` (dashboard3)	`dist/plugins/function/dashboard3.js`
`index4.html` (dashboard4)	`dist/plugins/function/dashboard4.js`

10. Form

Below is the basic form structure.

<form name="frmRes" id="frmRes" novalidate="novalidate">
                  <div class="row m-t-2">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="firstName1">First Name:</label>
                        <input class="form-control" name="firstname" required="" aria-required="true" type="text">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="lastName1">Last Name:</label>
                        <input class="form-control" name="lastname" required="" aria-required="true" type="text">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="firstName1">Email Address:</label>
                        <input class="form-control" name="email" required="" aria-required="true" type="text">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="lastName1">Phone Number:</label>
                        <input class="form-control" name="phoneno" required="" aria-required="true" type="text">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="location1">Select City :</label>
                        <select class="custom-select form-control" id="location1" name="location">
                          <option value="">Select City</option>
                          <option value="Amsterdam">India</option>
                          <option value="Berlin">USA</option>
                          <option value="Frankfurt">Dubai</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="date1">Date of Birth :</label>
                        <input class="form-control" id="date1" type="date">
                      </div>
                    </div>
                  </div>
                </form>

11. Table

Below is the basic form structure.

<table class="table">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">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>
                </tbody>
              </table>

12. Js

We diffentiate scss file for the pages and widgets and compile it with style.css

Scss files

File	Description
`jquery.js`, `popper.js, bootstrap.js`, `jquery.slimscroll.min`	These files are used at main files of the theme. and nicescroll is for sidebarscroll
`niche.js`	This is a main function js file. it contain sidebar and other basic js

Example

<script>
        var AdminLTEOptions = {
          //Enable sidebar expand on hover effect for sidebar mini
          //This option is forced to true if both the fixed layout and sidebar mini
          //are used together
          sidebarExpandOnHover: true,
          //BoxRefresh Plugin
          enableBoxRefresh: true,
          //Bootstrap.js tooltip
          enableBSToppltip: true
        };
      </script>
      <script src="dist/js/app.js" type="text/javascript"></script>

13. Plugins

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

14. Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

<div class="card"> <img class="card-img-top img-responsive" src="dist/img/img12.jpg" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a> </div>
            </div>

15. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to uxliner9@gmail.com

Thank you