Welcome To PlainAdmin Template Documentation.

Firstly, a huge thanks for using PlainAdmin Template, your support is truly appreciated!

This document covers the installation and use of this template and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to Open a Support Ticket

Quick Start

For using PlainAdmin you will first need to import some files in your project.

This template requires Node and Gulp CLI. Please follow these steps to install the required technologies:

  1. Make sure you have Node locally installed.

  2. Download Gulp Command Line Interface to be able to use gulp in your Terminal.

  3.  yarn add gulp-cli -g 
  4. After installing Gulp, run yarn install in the main plainadmin/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.

  5.  yarn add 
  6. Run gulp in the plainadmin/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

  7.  gulp 

    While the gulp command is running, files in the assets/scss/ and all html files will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

    Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

FILE STRUCTURE
Template/
├── assets/
│ ├── scss/
│ │ └── All scss files
│ ├── js/
│ │ └── All JS files
│ ├── fonts/
│ ├── css/
│ │ └── All CSS files
│ └── images/
└── All html files
CSS

Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.


  <!-- ========== All CSS files linkup ========= -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/css/LineIcons.css" />
  <link rel="stylesheet" href="assets/css/fullcalendar.css" />
  <link rel="stylesheet" href="assets/css/morris.css" />
  <link rel="stylesheet" href="assets/css/main.css" />

JS

Most of bootstrap components require the use of JavaScript to function. Specifically, they require Bootstrap.bundle.js. We added some popular plugins in the /js folder. Our main.js file contains some additional scripts which may come handy for your project.


  <!-- ========= All Javascript files linkup ======== -->
  <script src="assets/js/bootstrap.bundle.min.js">
  <script src="assets/js/Chart.min.js">
  <script src="assets/js/apexcharts.min.js">
  <script src="assets/js/dynamic-pie-chart.js">
  <script src="assets/js/moment.min.js">
  <script src="assets/js/fullcalendar.js">
  <script src="assets/js/jsvectormap.min.js">
  <script src="assets/js/world-merc.js">
  <script src="assets/js/polyfill.js">
  <script src="assets/js/main.js">

STARTER TEMPLATE

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
        rel="shortcut icon"
        href="assets/images/favicon.svg"
        type="image/x-icon"
      />
      <title>Blank Page | PlainAdmin</title>
  
      <!-- ========== All CSS files linkup ========= -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
      <link rel="stylesheet" href="assets/css/LineIcons.css" />
      <link rel="stylesheet" href="assets/css/fullcalendar.css" />
      <link rel="stylesheet" href="assets/css/morris.css" />
      <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body>
      <!-- ======== sidebar-nav start =========== -->
      <aside class="sidebar-nav-wrapper">
        <div class="navbar-logo">
          
        </div>
        <nav class="sidebar-nav">
          
        </nav>
      </aside>
      <div class="overlay"></div>
      <!-- ======== sidebar-nav end =========== -->
  
      <!-- ======== main-wrapper start =========== -->
      <main class="main-wrapper">
        <!-- ========== header start ========== -->
        <header class="header">
          <div class="container-fluid">
            
          </div>
        </header>
        <!-- ========== header end ========== -->
  
        <!-- ========== section start ========== -->
        <section class="section">
          <div class="container-fluid">
            
          </div>
          <!-- end container -->
        </section>
        <!-- ========== section end ========== -->
  
        <!-- ========== footer start =========== -->
        <footer class="footer">
          <div class="container-fluid">
            
          </div>
          <!-- end container -->
        </footer>
        <!-- ========== footer end =========== -->
      </main>
      <!-- ======== main-wrapper end =========== -->
  
      <!-- ========= All Javascript files linkup ======== -->
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/Chart.min.js"></script>
      <script src="assets/js/apexcharts.min.js"></script>
      <script src="assets/js/dynamic-pie-chart.js"></script>
      <script src="assets/js/moment.min.js"></script>
      <script src="assets/js/fullcalendar.js"></script>
      <script src="assets/js/jsvectormap.min.js"></script>
      <script src="assets/js/world-merc.js"></script>
      <script src="assets/js/polyfill.js"></script>
      <script src="assets/js/main.js"></script>
    </body>
  </html>  

Layout and Theme

We designed this template with two layouts. Right Sidebar and Left Sidebar. Default layout come with Left Sidebar. If you want Right Sidebar you have to add .rightSidebar this class at <body> tag.


  <body class="rightSidebar">
    .....
    Content Here
    .....
  </body>

We designed this template with two Theme. Light Theme and Dark Theme. Default theme come with Light Version. If you want Dark Version you have to add .darkTheme this class at <body> tag.


  <body class="darkTheme">
    .....
    Content Here
    .....
  </body>

Colors

BACKGROUND COLORS

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables scss/_variables.scss file.

  • .primary-bg
  • .secondary-bg
  • .success-bg
  • .danger-bg
  • .warning-bg
  • .info-bg
  • .dark-bg
  • .light-bg
  • .active-bg
  • .deactive-bg
  • .gray-bg
  • .purple-bg
  • .orange-bg

  <ul class="color-box mb-30">
    <li class="primary-bg text-white">
      .primary-bg
    </li>
    <li class="secondary-bg text-white">
      .secondary-bg
    </li>
    <li class="success-bg text-white">
      .success-bg
    </li>
    <li class="danger-bg text-white">
      .danger-bg
    </li>
    <li class="warning-bg text-white">
      .warning-bg
    </li>
    <li class="info-bg text-white">
      .info-bg
    </li>
    <li class="dark-bg text-white">
      .dark-bg
    </li>
    <li class="light-bg text-dark">
      .light-bg
    </li>
    <li class="active-bg text-white">
      .active-bg
    </li>
    <li class="deactive-bg text-dark">
      .deactive-bg
    </li>
    <li class="gray-bg text-white">
      .gray-bg
    </li>
    <li class="purple-bg text-white">
      .purple-bg
    </li>
    <li class="orange-bg text-white">
      .orange-bg
    </li>
  </ul>

also primary-bg-100 through primary-bg-900 available. for more info check out scss/default.scss file.

TEXT COLORS

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables scss/_variables.scss file.

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-danger
  • .text-warning
  • .text-info
  • .text-dark
  • .text-light
  • .text-active
  • .text-deactive
  • .text-gray
  • .text-purple
  • .text-orange

  <ul class="text-color-box mb-30">
    <li class="text-primary">
      .text-primary
    </li>
    <li class="text-secondary">
      .text-secondary
    </li>
    <li class="text-success">
      .text-success
    </li>
    <li class="text-danger">
      .text-danger
    </li>
    <li class="text-warning">
      .text-warning
    </li>
    <li class="text-info">
      .text-info
    </li>
    <li class="text-dark">
      .text-dark
    </li>
    <li class="text-light bg-dark-600">
      .text-light
    </li>
    <li class="text-active">
      .text-active
    </li>
    <li class="text-deactive">
      .text-deactive
    </li>
    <li class="text-gray">
      .text-gray
    </li>
    <li class="text-purple">
      .text-purple
    </li>
    <li class="text-orange">
      .text-orange
    </li>
  </ul>

Helper Classes

MARGIN AND PADDING

For controlling negative space you can use .mt-5 through .mt-200 these classes.

Note: .mt- for margin-top, .mb- for margin-bottom, .ml- for margin-left, .mr- for margin-right, .pt- for padding-top, .pb- for padding-bottom, .pl- for padding-left, .pr- for padding-right.


  .mt-5 {
    margin-top: 5px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .mt-15 {
    margin-top: 15px;
  }
  .mt-20 {
    margin-top: 20px;
  }

Alerts

ALERTS

Alerts are available for any length of text. For proper styling, use one of the these required contextual classes (e.g., .primary-alert ).

Excitement, Energy, Passion, Courage, Attention

Excitement, Energy, Passion, Courage, Attention

Excitement, Energy, Passion, Courage, Attention

Enthusiasm, Opportunity, Spontaneity, Happiness, Positivity

Growth, Harmony, Kindness, Dependability

Safety, Harmony, Stability, Reliability, Balance

Safety, Harmony, Stability, Reliability, Balance

Safety, Harmony, Stability, Reliability, Balance

Safety, Harmony, Stability, Reliability, Balance


  <div class="alert-list-wrapper">
    <div class="alert-box primary-alert">
      <div class="alert">
        <p>
          Excitement, Energy, Passion, Courage, Attention
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box danger-alert">
      <div class="alert">
        <p>
          Excitement, Energy, Passion, Courage, Attention
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box orange-alert">
      <div class="alert">
        <p>
          Excitement, Energy, Passion, Courage, Attention
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box warning-alert">
      <div class="alert">
        <p>
          Enthusiasm, Opportunity, Spontaneity, Happiness,
          Positivity
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box info-alert">
      <div class="alert">
        <p>
          Growth, Harmony, Kindness, Dependability
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box success-alert">
      <div class="alert">
        <p>
          Safety, Harmony, Stability, Reliability, Balance
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box secondary-alert">
      <div class="alert">
        <p>
          Safety, Harmony, Stability, Reliability, Balance
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box gray-alert">
      <div class="alert">
        <p>
          Safety, Harmony, Stability, Reliability, Balance
        </p>
      </div>
    </div>
    <!-- end alert-box -->
    <div class="alert-box black-alert">
      <div class="alert">
        <p>
          Safety, Harmony, Stability, Reliability, Balance
        </p>
      </div>
    </div>
    <!-- end alert-box -->
  </div>

Buttons

Buttons show what action will happen when the user clicks or touches it. Bootstrap buttons are used to initialize operations, both in the background or foreground of an experience.

Default Buttons

Default Buttons are comes with 3px corner radius and predefine styles.


  <ul class="buttons-group">
    <li>
      <a href="#0" class="main-btn primary-btn btn-hover"> Primary </a>
    </li>
    <li>
      <a href="#0" class="main-btn secondary-btn btn-hover"> Secondary </a>
    </li>
    <li>
      <a href="#0" class="main-btn success-btn btn-hover"> Success </a>
    </li>
    <li>
      <a href="#0" class="main-btn danger-btn btn-hover"> Danger </a>
    </li>
    <li>
      <a href="#0" class="main-btn warning-btn btn-hover"> Warning </a>
    </li>
    <li>
      <a href="#0" class="main-btn info-btn btn-hover"> Info </a>
    </li>
    <li>
      <a href="#0" class="main-btn dark-btn btn-hover"> Dark </a>
    </li>
    <li>
      <a href="#0" class="main-btn light-btn btn-hover"> Light </a>
    </li>
    <li>
      <a href="#0" class="main-btn active-btn btn-hover"> Active </a>
    </li>
    <li>
      <a href="#0" class="main-btn deactive-btn btn-hover"> Deactive </a>
    </li>
  </ul>

Square Buttons

Square Buttons are comes with 0px corner radius and predefined filled style.


  <ul class="buttons-group">
    <li>
      <a href="#0" class="main-btn primary-btn square-btn btn-hover"> Primary </a>
    </li>
    <li>
      <a href="#0" class="main-btn secondary-btn square-btn btn-hover"> Secondary </a>
    </li>
    <li>
      <a href="#0" class="main-btn success-btn square-btn btn-hover"> Success </a>
    </li>
    <li>
      <a href="#0" class="main-btn danger-btn square-btn btn-hover"> Danger </a>
    </li>
    <li>
      <a href="#0" class="main-btn warning-btn square-btn btn-hover"> Warning </a>
    </li>
    <li>
      <a href="#0" class="main-btn info-btn square-btn btn-hover"> Info </a>
    </li>
    <li>
      <a href="#0" class="main-btn dark-btn square-btn btn-hover"> Dark </a>
    </li>
    <li>
      <a href="#0" class="main-btn light-btn square-btn btn-hover"> Light </a>
    </li>
    <li>
      <a href="#0" class="main-btn active-btn square-btn btn-hover"> Active </a>
    </li>
    <li>
      <a href="#0" class="main-btn deactive-btn square-btn btn-hover"> Deactive </a>
    </li>
  </ul>

Outline Buttons

Outline Buttons are comes with 3px corner radius and predefined outline style. square-btn, rounded-md, rounded-full buttons are also available.


  <ul class="buttons-group">
    <li>
      <a href="#0" class="main-btn primary-btn-outline btn-hover"> Primary </a>
    </li>
    <li>
      <a href="#0" class="main-btn secondary-btn-outline btn-hover"> Secondary </a>
    </li>
    <li>
      <a href="#0" class="main-btn success-btn-outline btn-hover"> Success </a>
    </li>
    <li>
      <a href="#0" class="main-btn danger-btn-outline btn-hover"> Danger </a>
    </li>
    <li>
      <a href="#0" class="main-btn warning-btn-outline btn-hover"> Warning </a>
    </li>
    <li>
      <a href="#0" class="main-btn info-btn-outline btn-hover"> Info </a>
    </li>
    <li>
      <a href="#0" class="main-btn dark-btn-outline btn-hover"> Dark </a>
    </li>
    <li>
      <a href="#0" class="main-btn light-btn-outline btn-hover"> Light </a>
    </li>
    <li>
      <a href="#0" class="main-btn active-btn-outline btn-hover"> Active </a>
    </li>
    <li>
      <a href="#0" class="main-btn deactive-btn-outline btn-hover"> Deactive </a>
    </li>
  </ul>

Cards

Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no top, left, and right margins by default, so use spacing utilities as needed. They have no fixed width to start, so they’ll fill the full width of its parent.

Card Style One

Posted by : Hammad

Card Title here

With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.


  <!-- ========= card-style-1 start ========= -->
  <div class="card-style-1 mb-30">
    <div class="card-meta">
      <div class="image">
        <img
          src="assets/images/cards/card-style-1/admin-1.png"
          alt=""
        />
      </div>
      <div class="text">
        <p class="text-sm text-medium">
          Posted by : <a href="#0">Hammad</a>
        </p>
      </div>
    </div>
    <div class="card-image">
      <a href="#0">
        <img
          src="assets/images/cards/card-style-1/card-1.jpg"
          alt=""
        />
      </a>
    </div>
    <div class="card-content">
      <h4><a href="#0"> Card Title here </a></h4>
      <p>
        With supporting text below as a natural lead-in to
        additional content. consectetur adipiscing elit. Integer
        posuere erat a ante.
      </p>
    </div>
  </div>
  <!-- end card-->
  <!-- ========= card-style-1 end ========= -->

Card Style Two

Card Title here

With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.


  <!-- ========= card-style-2 start ========= -->
  <div class="card-style-2 mb-30">
    <div class="card-image">
      <a href="#0">
        <img
          src="assets/images/cards/card-style-2/card-1.jpg"
          alt=""
        />
      </a>
    </div>
    <div class="card-content">
      <h4><a href="#0">Card Title here </a></h4>
      <p>
        With supporting text below as a natural lead-in to
        additional content. consectetur adipiscing elit. Integer
        posuere erat a ante.
      </p>
    </div>
  </div>
  <!-- ========= card-style-2 end ========= -->

Card Style Three

Card Title here

With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante. With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.

Read More

  <!-- ========= card-style-3 start ========= -->
  <div class="card-style-3 mb-30">
    <div class="card-content">
      <h4><a href="#0">Card Title here </a></h4>
      <p>
        With supporting text below as a natural lead-in to
        additional content. consectetur adipiscing elit. Integer
        posuere erat a ante. With supporting text below as a
        natural lead-in to additional content. consectetur
        adipiscing elit. Integer posuere erat a ante.
      </p>
      <a href="#0" class="read-more">Read More</a>
    </div>
  </div>
  <!-- ========= card-style-3 end ========= -->

Card Style Four

Card Title here

With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.

Read More

  <!-- ========= card-style-4 start ========= -->
  <div class="card-style-4 mb-30">
    <div class="card-image">
      <a href="#0">
        <img
          src="assets/images/cards/card-style-4/card-1.png"
          alt=""
        />
      </a>
    </div>
    <div class="card-content">
      <h4><a href="#0">Card Title here </a></h4>
      <p>
        With supporting text below as a natural lead-in to
        additional content. consectetur adipiscing elit. Integer
        posuere erat a ante.
      </p>
      <a href="#0" class="read-more">Read More</a>
    </div>
  </div>
  <!-- ========= card-style-4 end ========= -->

Card Style Five

Card Title here

With supporting text below as a natural lead-in to additional content. consectetur adipiscing elit. Integer posuere erat a ante.

Read More

  <!-- ========= card-style-5 start ========= -->
  <div class="card-style-5 mb-30">
    <div class="card-image">
      <a href="#0">
        <img
          src="assets/images/cards/card-style-5/card-1.jpg"
          alt=""
        />
      </a>
    </div>
    <div class="card-content">
      <h4><a href="#0">Card Title here </a></h4>
      <p>
        With supporting text below as a natural lead-in to
        additional content. consectetur adipiscing elit. Integer
        posuere erat a ante.
      </p>
      <a href="#0" class="main-btn primary-btn btn-hover"> Read More</a>
    </div>
  </div>
  <!-- end card -->
  <!-- ========= card-style-5 end ========= -->

Tabs

We include Bootstrap Tabs also with new styles.


  <div class="row">
    <div class="col-lg-12">
      <div class="tab-style-1 card-style mb-30">
        <nav class="nav" id="nav-tab">
          <button
            class="active"
            id="tab-1-1"
            data-bs-toggle="tab"
            data-bs-target="#tabContent-1-1"
          >
            Home
          </button>
          <button
            id="tab-1-2"
            data-bs-toggle="tab"
            data-bs-target="#tabContent-1-2"
          >
            Profile
          </button>
          <button
            id="tab-1-3"
            data-bs-toggle="tab"
            data-bs-target="#tabContent-1-3"
          >
            Contact
          </button>
        </nav>
        <div class="tab-content" id="nav-tabContent1">
          <div class="tab-pane fade show active" id="tabContent-1-1">
            <p>.....</p>
          </div>
          <div class="tab-pane fade" id="tabContent-1-2">
            <p>.....</p>
          </div>
          <div class="tab-pane fade" id="tabContent-1-3">
            <p>.....</p>
          </div>
        </div>
      </div>
      <!-- end card -->
    </div>
    <!-- end col -->
  </div>

Forms

Form Elements

We Designed form elements in few styles.

Input Field

  <div class="input-style-1">
    <label>Full Name</label>
    <input type="text" placeholder="Full Name" />
  </div>
  <!-- end input -->
  <div class="input-style-2">
    <input type="text" placeholder="Full Name" />
    <span class="icon"> <i class="lni lni-user"></i> </span>
  </div>
  <!-- end input -->
  <div class="input-style-3">
    <input type="text" placeholder="Full Name" />
    <span class="icon"><i class="lni lni-user"></i></span>
  </div>
  <!-- end input -->

Textarea Field

  <div class="input-style-1">
    <label>Message</label>
    <textarea placeholder="Message" rows="5"></textarea>
  </div>
  <!-- end textarea -->
  <div class="input-style-3">
    <textarea placeholder="Message" rows="5"></textarea>
    <span class="icon">
      <i class="lni lni-text-format"></i>
    </span>
  </div>
  <!-- end textarea -->

Select

  <div class="select-style-1">
    <label>Category</label>
    <div class="select-position">
      <select>
        <option value="">Select category</option>
        <option value="">Category one</option>
        <option value="">Category two</option>
        <option value="">Category three</option>
      </select>
    </div>
  </div>
  <!-- end select -->
  <div class="select-style-2">
    <div class="select-position">
      <select>
        <option value="">Select category</option>
        <option value="">Category one</option>
        <option value="">Category two</option>
        <option value="">Category three</option>
      </select>
    </div>
  </div>
  <!-- end select -->

Toggle switch input

  <div class="form-check form-switch toggle-switch mb-30">
    <input
      class="form-check-input"
      type="checkbox"
      id="toggleSwitch1"
    />
    <label class="form-check-label" for="toggleSwitch1"> Default switch checkbox input </label>
  </div>
  <div class="form-check form-switch toggle-switch">
    <input
      class="form-check-input"
      type="checkbox"
      id="toggleSwitch2"
      checked
    />
    <label class="form-check-label" for="toggleSwitch2"> Default switch checkbox input </label>
  </div>

Checkbox

  <div class="form-check checkbox-style mb-20">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="checkbox-1"
    />
    <label class="form-check-label" for="checkbox-1">
      Default Checkbox</label
    >
  </div>
  <!-- end checkbox -->
  <div class="form-check checkbox-style mb-20">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="checkbox-2"
      disabled
    />
    <label class="form-check-label" for="checkbox-2">
      Disabled Checkbox</label
    >
  </div>
  <!-- end checkbox -->
  <div class="form-check checkbox-style checkbox-success mb-20">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="checkbox-3"
    />
    <label class="form-check-label" for="checkbox-3">
      Success Checkbox</label
    >
  </div>
  <!-- end checkbox -->
  <div class="form-check checkbox-style checkbox-warning mb-20">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="checkbox-4"
    />
    <label class="form-check-label" for="checkbox-4">
      Warning Checkbox</label
    >
  </div>
  <!-- end checkbox -->
  <div class="form-check checkbox-style checkbox-danger mb-20">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="checkbox-5"
    />
    <label class="form-check-label" for="checkbox-5">
      Danger Checkbox</label
    >
  </div>
  <!-- end checkbox -->

Radio

  <div class="form-check radio-style mb-20">
    <input
      class="form-check-input"
      type="radio"
      value=""
      id="radio-1"
    />
    <label class="form-check-label" for="radio-1">
      Default Radio</label
    >
  </div>
  <!-- end radio -->
  <div class="form-check radio-style mb-20">
    <input
      class="form-check-input"
      type="radio"
      value=""
      id="radio-2"
      disabled
    />
    <label class="form-check-label" for="radio-2">
      Disabled Radio</label
    >
  </div>
  <!-- end radio -->
  <div class="form-check radio-style radio-success mb-20">
    <input
      class="form-check-input"
      type="radio"
      value=""
      id="radio-3"
    />
    <label class="form-check-label" for="radio-3">
      Success Radio</label
    >
  </div>
  <!-- end radio -->
  <div class="form-check radio-style radio-warning mb-20">
    <input
      class="form-check-input"
      type="radio"
      value=""
      id="radio-4"
    />
    <label class="form-check-label" for="radio-4">
      Warning Radio</label
    >
  </div>
  <!-- end radio -->
  <div class="form-check radio-style radio-danger mb-20">
    <input
      class="form-check-input"
      type="radio"
      value=""
      id="radio-5"
    />
    <label class="form-check-label" for="radio-5">
      Danger Radio</label
    >
  </div>
  <!-- end radio -->

Icons

We Use LineIcons and Material Design Icons in our template. You can use any Icon of these icons. You have to include assets/fonts this folder in your project folder and assets/css/lineIcons.css and materialdesignicons.min.css these two files also.

Line Icons
  • 500px
  • add-files
  • adobe
  • agenda
  • airbnb
  • alarm
  • alarm-clock
  • amazon
  • amazon-original

  <div class="icons-wrapper">
    <ul class="icons">
      <li class="trigger Free">
        <i class="lni lni-500px"></i><span>500px</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-add-files"></i><span>add-files</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-adobe"></i><span>adobe</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-agenda"></i><span>agenda</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-airbnb"></i><span>airbnb</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-alarm"></i><span>alarm</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-alarm-clock"></i><span>alarm-clock</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-amazon"></i><span>amazon</span>
      </li>
      <li class="trigger Free">
        <i class="lni lni-amazon-original"></i><span>amazon-original</span>
      </li>
    </ul>
  </div>

and many more Icons.
Material Design Icons
abacus
alarm-light-off
alarm-light-off-outline
broadcast
broadcast-off
calendar-clock-outline
chat-question
chat-question-outline

  <div class="icons-wrapper">
    <div class="icons" id="newIcons">
      <div>
        <i class="mdi mdi-abacus"></i>
        <span>abacus</span>
      </div>
      <div>
        <i class="mdi mdi-alarm-light-off"></i>
        <span>alarm-light-off</span>
      </div>
      <div>
        <i class="mdi mdi-alarm-light-off-outline"></i> <span>alarm-light-off-outline</span>
      </div>
      <div>
        <i class="mdi mdi-broadcast"></i>
        <span>broadcast</span>
      </div>
      <div>
        <i class="mdi mdi-broadcast-off"></i>
        <span>broadcast-off</span>
      </div>
      <div>
        <i class="mdi mdi-calendar-clock-outline"></i>
        <span>calendar-clock-outline</span>
      </div>
      <div>
        <i class="mdi mdi-chat-question"></i>
        <span>chat-question</span>
      </div>
      <div>
        <i class="mdi mdi-chat-question-outline"></i>
        <span>chat-question-outline</span>
      </div>
    </div>
  </div>

and many more Icons.

Tables

As we use Bootstrap you can access any of Bootstrap table in you project. and we have some new design you can checkout these at tables.html, basic-table.html and tables-responsive.html

Basic Table
Lead
Email
Phone No
Company
Action

Courtney Henry

yourmail@gmail.com

(303)555 3343523

UIdeck digital agency

JOhn Doe

yourmail@gmail.com

(303)555 3343523

Graygrids digital agency

David Smith

yourmail@gmail.com

(303)555 3343523

Abc agency

Jonathon

yourmail@gmail.com

(303)555 3343523

Creative IT Agency

Anna Lee

yourmail@gmail.com

(303)555 3343523

Halal It agency

Gray Simon

yourmail@gmail.com

(303)555 3343523

DesignCourse


  <div class="table-wrapper table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th><h6>Lead</h6></th>
          <th><h6>Email</h6></th>
          <th><h6>Phone No</h6></th>
          <th><h6>Company</h6></th>
          <th><h6>Action</h6></th>
        </tr>
        <!-- end table row-->
      </thead>
      <tbody>
        <tr>
          <td class="min-width">
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-1.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>Courtney Henry</p>
              </div>
            </div>
          </td>
          <td class="min-width">
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td class="min-width">
            <p>(303)555 3343523</p>
          </td>
          <td class="min-width">
            <p>UIdeck digital agency</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
        <tr>
          <td class="min-width">
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-2.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>JOhn Doe</p>
              </div>
            </div>
          </td>
          <td class="min-width">
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td class="min-width">
            <p>(303)555 3343523</p>
          </td>
          <td class="min-width">
            <p>Graygrids digital agency</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
        <tr>
          <td class="min-width">
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-3.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>David Smith</p>
              </div>
            </div>
          </td>
          <td class="min-width">
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td class="min-width">
            <p>(303)555 3343523</p>
          </td>
          <td class="min-width">
            <p>Abc agency</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
        <tr>
          <td class="min-width">
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-4.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>Jonathon</p>
              </div>
            </div>
          </td>
          <td class="min-width">
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td class="min-width">
            <p>(303)555 3343523</p>
          </td>
          <td class="min-width">
            <p>Creative IT Agency</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
        <tr>
          <td>
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-5.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>Anna Lee</p>
              </div>
            </div>
          </td>
          <td>
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td>
            <p>(303)555 3343523</p>
          </td>
          <td>
            <p>Halal It agency</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
        <tr>
          <td>
            <div class="lead">
              <div class="lead-image">
                <img
                  src="assets/images/lead/lead-6.png"
                  alt=""
                />
              </div>
              <div class="lead-text">
                <p>Gray Simon</p>
              </div>
            </div>
          </td>
          <td>
            <p><a href="#0">yourmail@gmail.com</a></p>
          </td>
          <td>
            <p>(303)555 3343523</p>
          </td>
          <td>
            <p>DesignCourse</p>
          </td>
          <td>
            <div class="action">
              <button class="text-danger">
                <i class="lni lni-trash-can"></i>
              </button>
            </div>
          </td>
        </tr>
        <!-- end table row -->
      </tbody>
    </table>
    <!-- end table -->
  </div>