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:

Make sure you have Node locally installed.
Download Gulp Command Line Interface to be able to use gulp in your Terminal.

 yarn add gulp-cli -g

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.

 yarn add

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.

 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

Enthusiasm, Opportunity, Spontaneity, Happiness, Positivity

Growth, Harmony, Kindness, Dependability

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.

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light
Active
Deactive


  <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.

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light
Active
Deactive


  <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.

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light
Active
Deactive


  <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.


  <!-- ========= 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.


  <!-- ========= 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.


  <!-- ========= 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.

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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1912.


  <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

Full Name


  <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

Message


  <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

Toggle switch input

Default switch checkbox 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

Default Checkbox

Disabled Checkbox

Success Checkbox

Warning Checkbox

Danger 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

Default Radio

Disabled Radio

Success Radio

Warning Radio

Danger 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
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>

Welcome To PlainAdmin Template Documentation.

Quick Start

FILE STRUCTURE

CSS

JS

STARTER TEMPLATE

Layout and Theme

Colors

BACKGROUND COLORS

TEXT COLORS

Helper Classes

MARGIN AND PADDING

Alerts

ALERTS

Buttons

Default Buttons

Square Buttons

Outline Buttons

Cards

Card Style One

Card Title here

Card Style Two

Card Title here

Card Style Three

Card Title here

Card Style Four

Card Title here

Card Style Five

Card Title here

Tabs

Forms

Form Elements

Input Field

Textarea Field

Select

Toggle switch input

Checkbox

Radio

Icons

Line Icons

Material Design Icons

Tables

Basic Table

Lead

Email

Phone No

Company

Action

Credits