AdminX PHP

Get Support

Thank you so much for purchasing AdminX from themeforest.

  • Created: 1 August, 2024
  • Update: 1 August, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /AdminX folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website. Make sure your server has installed PHP. We recommend to use PHP version 8.* but it is working on older versions as well.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • AdminX/template - Contains all of the pages referenced
      • AdminX/assets/css - Stylesheet files
      • AdminX/assets/images - Images files
      • AdminX/assets/js - Javascript files
      • AdminX/assets/sass - Sass files
      • AdminX/assets/vendor – All external libs.
    • AdminX/template/index.php - Homepage
  3. You should upload all or specific PHP files as per your need.
  4. You are good to go for adding your content now!
  5. If you want to compile or run a template through webpack, first use 'npm i' and then 'npm run watch

Webpack

Webpack is a powerful tool for bundling and managing assets in web applications. Configuring webpack for your admin panel ensures efficient bundling of JavaScript, CSS, and other assets, optimizing performance and enhancing development workflows.

Setup:

01. Installation

Ensure webpack is installed globally or locally in your project.

                              
npm install webpack webpack-cli --save-dev
02. Project Structure:

Organize your admin panel project structure to align with webpack's module bundling capabilities.

Configuration:

01. webpack.config.js:

Create a webpack configuration file in the root of your project.

                              
                                const path = require('path');
                                module.exports = {
                                    entry: './src/admin/index.js',
                                    output: {
                                        filename: 'admin.bundle.js',
                                        path: path.resolve(__dirname, 'dist'),
                                    },
                                    module: {
                                        rules: [
                                            {
                                                test: /\.js$/,
                                                exclude: /node_modules/,
                                                use: {
                                                    loader: 'babel-loader',
                                                },
                                            },
                                            {
                                                test: /\.css$/,
                                                use: ['style-loader', 'css-loader'],
                                            },
                                            // Add more rules for other asset types as needed
                                        ],
                                    },
                                };
02. Entry Point:

Specify the main entry point for webpack (entry).

03. Output:

Define where webpack should output the bundled files (output).

04. Loaders:

Configure loaders to process different file types (e.g., JavaScript with Babel, CSS with style-loader and css-loader)..

PHP Folder Structure

  • Mavis
    • assets
      • css
        • responsive.css
        • style.css
      • fonts
        • calendar
        • flag-icons-master
        • fontawesome
        • tabler
        • weather
      • icons
      • images
      • js
        • apexchart
        • Calender
        • emoji-picker
        • map
        • photoswipe
        • simpale-datatable
        • swiper-slider
        • add_product.js
        • advance_table.js
        • alert.js
        • analytics_dashboard.js
        • animation.js
        • apex_chart.js
        • area_charts.js
        • avtar.js
        • bar.js
        • blank.js
        • blog.js
        • boxplot.js
        • bubble.js
        • calendar.js
        • candlestick_charts.js
        • cart.js
        • chart.js
        • chat.js
        • cheatsheet.js
        • checkout.js
        • clipboard.js
        • column.js
        • coming_soon.js
        • count_down.js
        • countup.js
        • customizer.js
        • custom-select.js
        • data_table.js
        • date_picker.js
        • ...
        • wow-custom.js
      • scss
        • app
        • responsive.scss
        • style.scss
      • vendor
    • template
      • partials
        • backtotop.php
        • customizer.php
        • footer.php
        • head.php
        • head2.php
        • head3.php
        • header.php
        • navbar.php
        • preloader.php
        • scripts.php
        • scripts2.php
      • index.php and other pages
    • webpack.config.js
    • package-lock.json
    • package.json
    • postcss.config.js

PHP Structure

AdminX follows a simple and easy to customize coding structure.


<!DOCTYPE html>
<html lang="en"><head>
<head>

    <!-- meta tags, fonts and title tag -->
    <?php include("partials/head.php"); ?>

    <!--  plugins css -->

    <!-- icons css files -->
    <?php include("partials/head2.php"); ?>

    <!--  plugins css -->

    <!-- themes css files like bootstrap style and responsive -->
    <?php include("partials/head3.php"); ?>

</head>

<body>
  <div class="app-wrapper">

  <?php include("partials/preloader.php"); ?>

  <!-- Menu Navigation starts -->
  <?php include("partials/navbar.php"); ?>
  <!-- Menu Navigation ends -->

    <div class="app-content">
      <div class="">

      <?php include("partials/header.php"); ?>

        <!-- Body main section starts -->
        <main>
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
                    ...
               </div>
             </div>
           </div>
         </main>     
        <!-- Body main section ends -->

        <?php include("partials/backtotop.php"); ?>
        <?php include("partials/footer.php"); ?>

      </div>
    </div>
  </div>
  <!-- essential   -->

  <?php include("partials/customizer.php"); ?>

  <?php include("partials/scripts.php"); ?>

  <!--Plugins js-->

  <?php include("partials/scripts2.php"); ?>

</body>

</html>

SCSS

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - AdminX/assets/sass/app

If you want to add new scss file. so you can_stylesheet.scss file in app folder and import file in style.scss and use easily

Open the sass/app/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your style.scss File.

Colors Variables

All color-related SCSS variables can be found in the AdminX/assest/scss/app/_variables.scss 


    .default{
    --primary: 70, 127, 251;
    --secondary: 116, 120, 141;
    }
    
    .gold{
    --primary: 192,127,0;
    --secondary: 76,61,61;
    }

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles The Document <head> after the css/style.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly. It will be found in the template/partials/head.php head2.php & head3.php 


    <head>
    <!--font-awesome-css-->
    <link rel="stylesheet" href="../assets/vendor/fontawesome/css/all.css">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
    
    <!-- tabler icons-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/tabler-icons/tabler-icons.css">
    
    <!--flag Icon css-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/flag-icons-master/flag-icon.css">
    
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/bootstrap/bootstrap.min.css">
    
    <!-- simplebar css-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/simplebar/simplebar.css">
    
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css">
    
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
    </head>

Logo Settings

The Logo Container can be found in the Header Container - <header> in the template/partials/header.php 


    <!-- Logo -->
    <div class="app-logo">
    <a class="logo d-inline-block" href="index.html" title="iDocs">
     <img src="../assets/images/logo/1.png" alt="Logo"/>
    </a>
    </div>
    <!-- Logo End -->

Provided Features

  • featues-icon

    Bootstrap

    CSS Framework
  • featues-icon

    Validation

    Validation
  • featues-icon

    SCSS

    Style Sheets
  • featues-icon

    Apex Chart

    JS Charts
  • featues-icon

    Webpack

    Module bundler
  • featues-icon

    Google Map

    Map
  • featues-icon

    Chart js

    Html Charts
  • featues-icon

    Goggle Fonts

    Goggle Fonts
  • featues-icon

    Ui kits

    Components
  • featues-icon

    Apps

    Apps
  • featues-icon

    NPM

    Pkg Manager
  • featues-icon

    Fullcalendar

    Event Calendar

Layout

Documentation and examples for header, navbar, sidebar, footer

LtR Layout

For the default LTR layout, ensure that your website has the ltr class added to the body tag, and include the dir="ltr" attribute in your HTML tag in the template/partials/head.php & head3.php. 

                                  
                                      <html lang="en" dir="ltr">
                                        <body class="ltr">
                                           ...
                                        </body>
                                      </html>

Rtl Layout

For enabling the Rtl Layout on your website, simply apply the rtl class to the body tag and add the dir="rtl" attribute to your HTML tag


                                  <html lang="en" dir="rtl">
                                    <body class="rtl">
                                       ...
                                    </body>
                                   </html>

Box Layout

For enabling the Box Layout on your website, simply apply the box class to the body tag 


                                  <html lang="en">
                                    <body class="box-layout">
                                       ...
                                    </body>
                                   </html>

Header

Documentation and examples for header


    <!-- Header Section starts -->
    
    <header class="header-main">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-6 d-flex align-items-center header-left">
                    <span class="header-toggle me-2">
                      <i class="ti ti-category"> </i>
                    </span>
       
                    <div class="header-searchbar">
                      ...
                    </div>
                  </div>
                  <div class="col-6 d-flex align-items-center justify-content-end header-right">
                    <ul class="d-flex align-items-center">
       
                      <li class="header-language">
                      ...
                       </li>
       
                      <li class="header-apps">
                      ...  
                      </li>
                      
                      <li class="header-cart d-none d-sm-block">
                      ...  
                      </li>
                      
                      <li class="header-dark head-icon">
                       ...
                      </li>
       
                      <li class="header-notification">
                       ...
                      </li>
       
                      <li class="header-profile">
                        ...
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
       
    <!-- Header Section ends -->

Sidebar

Documentation and examples for Sidebar

Vertical Sidebar

Vertical Sidebar See below image and code for more information in the template/partials/navbar.php.

 
    <nav class="vertical-sidebar">
       ...
    </nav>

Dark Sidebar

Dark background Color & Light text for dark sidebar. See below image and code for more information.

 
      <nav class="dark-sidebar">
       ...
      </nav>

Horizontal Sidebar

Horizontal Sidebar See below image and code for more information.


      <nav class="horizontal-sidebar">
      ...
      </nav>

Apps

The list of Apps descriptions are provided below for your reference:

Helper Class

We have created some really useful helper classes for you.

Headings

Preview

All heading Classes from <h1> to <h6> , are at your disposal for structuring your content.

h1Fontsize
h2Fontsize
h3Fontsize
h4Fontsize
h5Fontsize
h6Fontsize

<div class="h1"> ... </div>
<div class="h2"> ... </div>
<div class="h3"> ... </div>
<div class="h4"> ... </div>
<div class="h5"> ... </div>
<div class="h6"> ... </div>

Font Size

Preview

Change the text size using .f-s- class.

- FontSize-10
- FontSize-12
- FontSize-14
- FontSize-16
- FontSize-18
- FontSize-20
- FontSize-24 

<span class="f-s-10 ">... </span>
<span class="f-s-12 ">... </span>
<span class="f-s-14 ">... </span>
<span class="f-s-16 ">... </span>
<span class="f-s-18 ">... </span>
<span class="f-s-20 ">... </span>
<span class="f-s-24 ">... </span>
<span class="f-s-32 ">... </span>

Font Weight

Preview

Change the Font Weight using .f-fw- class.

f-fw-100*
f-fw-200*
f-fw-300*
f-fw-400*
f-fw-500*
f-fw-600*
f-fw-700*
f-fw-800*
f-fw-900* 
                                  
      <span class="f-fw-100 ms-2">... </span>
      <span class="f-fw-200 ms-2">... </span>
      <span class="f-fw-300 ms-2">... </span>
      <span class="f-fw-400 ms-2">... </span>
      <span class="f-fw-500 ms-2">... </span>
      <span class="f-fw-600 ms-2">... </span>
      <span class="f-fw-700 ms-2">... </span>
      <span class="f-fw-800 ms-2">... </span>
      <span class="f-fw-900 ms-2">...</span>

Text Color

Preview

Change the text Color using .text- class.

- .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark 
                                  
        <span class="text-primary"> ... </span>
        <span class="text-secondary"> ... </span>
        <span class="text-success"> ... </span>
        <span class="text-danger"> ... </span>
        <span class="text-warning"> ... </span>
        <span class="text-info"> ... </span>
        <span class="text-light"> ... </span>
        <span class="text-dark  "> ... </span>

Text background Color

Preview

Change the text background Color using .txt-bg- class.

- .txt-bg-primary - .txt-bg-secondary - .txt-bg-success - .txt-bg-danger - .txt-bg-warning - .txt-bg-info - .txt-bg-light - .txt-bg-dark 
                                  
        <span class="txt-bg-primary"> ... </span>
        <span class="txt-bg-secondary"> ... </span>
        <span class="txt-bg-success"> ... </span>
        <span class="txt-bg-danger"> ... </span>
        <span class="txt-bg-warning"> ... </span>
        <span class="txt-bg-info"> ... </span>
        <span class="txt-bg-light"> ... </span>
        <span class="txt-bg-dark  "> ... </span>

Text Align & Decoration

Preview

Change the text align & decoration .text- class.

Text-Lowercase
Text-Uppercase
Text-Capitalize
- Text Align Center
- Text Align Start
- Text Align End
- Text Decoration underline
- Text Decoration line-through
- Text Decoration overline
- Text Decorationoverline-underline
- Text Decorationunderline-line-through 
                                  
        <div class="text-lowercase p-2">...</div>
        <div class="text-uppercase p-2">...</div>
        <div class="text-capitalize p-2">...</div>
        <div class="text-center">...</div>
        <div class="text-start">...</div>
        <div class="text-end">...</div>
        <span class="text-d-underline"> ... </span>
        <span class="text-d-line-through"> ... </span>
        <span class="text-d-overline"> ...</span>
        <span class="text-d-overline-underline">...</span>
        <span class="text-d-line-underline">...</span>

Ui Kits

Elevate Your Admin Experience with our Cutting-Edge UI Kits

Button

Preview 
                              
    <button type="button" class="btn btn-primary">...</button>
    <button type="button" class="btn btn-secondary">...</button>
    <button type="button" class="btn btn-success">...</button>
    <button type="button" class="btn btn-danger">...</button>
    <button type="button" class="btn btn-warning">...</button>
    <button type="button" class="btn btn-info">...</button>
    <button type="button" class="btn btn-light">...</button>
    <button type="button" class="btn btn-dark">...</button>
    <button type="button" class="btn btn-link">...</button>

Badges

Preview
Primary Secondary Success Danger Warning Info Light Dark 
                              
    <span class="badge text-bg-primary">...</span>
    <span class="badge text-bg-secondary">...</span>
    <span class="badge text-bg-success">...</span>
    <span class="badge text-bg-danger">...</span>
    <span class="badge text-bg-warning">...</span>
    <span class="badge text-bg-info">...</span>
    <span class="badge text-bg-light">...</span>
    <span class="badge text-bg-dark">...</span>

Accordions

Preview

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. 
                            
    <div class="accordion app-accordion accordion-secondary">
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button" type="button" data-bs-toggle="collapse"
    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    ...
    </button>
    </h2> 
    <div id="collapseOne" class="accordion-collapse collapse show"
    data-bs-parent="#accordionExample">
    <div class="accordion-body">
    ....
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    ...
    </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
    <div class="accordion-body">
    ...
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    ...
    </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
    <div class="accordion-body">
    ...
    </div>
    </div>
    </div>
    </div>

Alert

Preview 
                                
    <div class="alert alert-primary" role="alert"> ...  </div>
    <div class="alert alert-secondary " role="alert"> ...  </div>
    <div class="alert alert-success " role="alert"> ... </div>
    <div class="alert alert-danger " role="alert"> ...  </div>
    <div class="alert alert-warning " role="alert"> ...  </div>
    <div class="alert alert-info " role="alert"> ...  </div>
    <div class="alert alert-light " role="alert">...  </div>
    <div class="alert alert-dark " role="alert"> ...  </div>

Progress

Preview 
                              
    <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 12.5%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-secondary" style="width: 25%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 37.5%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 50%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-warning" style="width: 62.5%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 75%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-light" style="width: 82.5%"></div>
    </div>
    <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
    aria-valuemax="100">
    <div class="progress-bar bg-dark" style="width: 95%"></div>
    </div>

Advance Ui

Elevate Your Admin Interface with Advanced UI - Where Innovation Meets Intuition.

Sweetalert

Preview offical

When utilizing JavaScript, make sure to add the following script tags. 


    <!-- sweetalert js-->
    <script src="../assets/vendor/sweetalert/sweetalert.js"> </script>
    
    <!-- js -->
    <script src="../assets/js/sweet_alert.js"> </script>

Tour

Preview offical

When utilizing JavaScript, make sure to add the following style & script tags. 

      
    <!-- shepherd css -->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/shepherdjs/shepherd.css">          
    <!-- shepherdjs -->
    <script src="../assets/vendor/shepherdjs/shepherd.min.js"></script>
    <!-- tour js -->
    <script src="../assets/js/tour.js"></script>

Slick slider

Preview offical

When utilizing JavaScript, make sure to add the following style & script tags. 

     
    <!-- slick css -->
    <link rel="stylesheet" href="../assets/vendor/slick/slick.css">
    <link rel="stylesheet" href="../assets/vendor/slick/slick-theme.css">    
    
    
    <!-- slick-file -->
    <script src="../assets/vendor/slick/slick.min.js"></script>
    <!-- slick js -->
    <script src="../assets/js/slick.js"></script>

Tooltip

Preview offical

When utilizing JavaScript, make sure to add the following script tags.

     
    <!-- Tooltip js  -->
    <script src="../assets/js/tooltips_popovers.js"></script>

Tables

Basic Table

Preview

Using the most basic table need to add .table class to table tag

Id Name Position Office Age Salary
1 Tiger Nixon Architect Edinburgh 61 $320,800
2 Garrett Accountant Tokyo 63 $170,750
3 Ashton Cox Technical Francisco 66 $86,000
4 Cedric Kelly Developer Edinburgh 22 $433,060
5 Airi Satou Accountant Tokyo 33 $162,700
6 Williamson Integration New York 61 $372,000 

<div class="table-responsive">                              
<table class="table mb-0">
   ...
</table>
</div>

Data Table

Preview offical

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.

Name Position Office Age Start date Salary Action
Tiger Nixon System Architect Edinburgh 61 $3674.55 $320,800
Garrett Winters Accountant Tokyo 63 2011-07-25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009-01-12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012-03-29 $433,060

- When utilizing JavaScript, make sure to add the following script tags.



<!-- Data Table css-->
<link rel="stylesheet" type="text/css" href="../assets/vendor/datatable/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../assets/vendor/datatable/datatable2/buttons.dataTables.min.css">


<!-- Data Table js-->
 <script src="../assets/vendor/datatable/jquery.dataTables.min.js"></script>
 <script src="../assets/vendor/datatable/datatable2/dataTables.buttons.min.js"></script>
 <script src="../assets/vendor/datatable/datatable2/jszip.min.js"></script>
 <script src="../assets/vendor/datatable/datatable2/pdfmake.min.js"></script>
 <script src="../assets/vendor/datatable/datatable2/vfs_fonts.js"></script>
 <script src="../assets/vendor/datatable/datatable2/buttons.html5.min.js"></script>
 <script src="../assets/vendor/datatable/datatable2/buttons.print.min.js"></script>

 <!-- Data Table js-->
 <script src="../assets/js/data_table.js"></script>

Forms

Tooltips Validation

Preview

If your form layout allows it, you can swap the SP .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip.

                              
<form class="row g-3 app-form" id="form-validation">
  <div class="col-md-6">
   <label for="userName" class="form-label">User Name</label>
   <input type="text" class="form-control" id="userName" name="userName">
   <div class="mt-1">
    <span id="userNameError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-md-6">
   <label for="email" class="form-label">Email</label>
   <input type="email" class="form-control" id="email">
   <div class="mt-1">
    <span id="emailError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-md-6">
   <label for="password" class="form-label">Password</label>
   <input type="password" class="form-control" id="password">
   <div class="mt-1">
    <span id="passwordError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-6">
   <label for="address" class="form-label">Address</label>
   <input type="text" class="form-control" id="address" placeholder="1234 Main St">
   <div class="mt-1">
    <span id="addressError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-5">
   <label for="address2" class="form-label">Address 2</label>
   <input type="text" class="form-control" id="address2" placeholder="Address">
  <div class="mt-1">
   <span id="addressError2" class="text-danger"></span>
  </div>
  </div>
  <div class="col-md-5">
   <label for="city" class="form-label">City</label>
   <input type="text" class="form-control" id="city">
   <div class="mt-1">
    <span id="cityError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-md-2">
   <label for="zipCode" class="form-label">Zip</label>
   <input type="text" class="form-control" id="zipCode">
   <div class="mt-1">
    <span id="zipCodeError" class="text-danger"></span>
   </div>
  </div>
  <div class="col-12">
   <div class="form-check d-flex gap-1">
    <input class="form-check-input mg-2" type="checkbox" id="gridCheck">
    <label class="form-check-label" for="gridCheck">
     Check me out
    </label>
   </div>
  </div>
  <div class="col-12">
   <button type="submit" value="Submit" class="btn btn-primary">Submit form</button>
  </div>
 </form>

Default Vertical Form

Preview
We'll never share your email with anyone else.
                              
<form class="app-form">
 <div class="mb-3">
  <label class="form-label">Email address</label>
  <input type="email" class="form-control">
  <div class="form-text">We'll never share your email with anyone else.</div>
 </div>
 <div class="mb-3">
  <label class="form-label">Password</label>
  <input type="password" class="form-control">
 </div>
 <div class="mb-3 form-check d-flex p-0">
  <input type="checkbox" class="m-1 form-check-input" id="formCheck1">
  <label class="form-check-label" for="formCheck1">remember me</label>
 </div>
 <div class="text-end">
  <button type="submit" class="btn btn-primary">Submit</button>
 </div>
</form>

Maps

Google Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.


<!-- google maps api-->
<script src="http://maps.google.com/maps/api/js"></script>

<!-- google maps js-->
<script src="../assets/vendor/googlemap/gmaps.js"></script>

<!-- google maps custom js-->
<script src="../assets/js/google-map.js"></script>

Leaflet-Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.



                              
<!-- leaflet css-->
<link src="../assets/vendor/leafletmaps/leaflet.css"></link>

<!-- leaflet map js-->
<script src="../assets/vendor/leafletmaps/leaflet.js"></script>

<!-- leaflet map custom js-->
<script src="../assets/js/leaflet-map.js"></script>

Vector-Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.


<!-- vector Map css-->
<link src="../assets/vendor/vector-map/jquery-jvectormap.css"></link>

<!-- leaflet map js-->
<script src="../assets/vendor/vector-map/jquery-jvectormap-2.0.5.min.js"></script>
<script src="../assets/vendor/vector-map/jquery-jvectormap-world-mill.js"></script>
<script src="../assets/vendor/vector-map/europe-mill.js"></script>
<script src="../assets/vendor/vector-map/jquery-jvectormap-us-lcc.js"></script>
<script src="../assets/vendor/vector-map/jvectormap-es-mill.js"></script>
<script src="../assets/vendor/vector-map/africa-mill.js"></script>
<script src="../assets/vendor/vector-map/asia-mill.js"></script>
<script src="../assets/vendor/vector-map/uk_countries-mill.js"></script>
<script src="../assets/vendor/vector-map/ru-mill.js"></script>

<!-- leaflet map custom js-->
<script src="../assets/js/vector-map.js"></script>

Chart

ChartJs

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.



<!-- chart js js-->
<script src="../assets/vendor/chartjs/chart.js"></script>

<!-- chart js custom js-->
<script src="../assets/js/chart.js"></script>

Apexchart

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.


<!-- apexchart css-->
<link rel="stylesheet" type="text/css" href="../assets/vendor/apexcharts/apexcharts.css">

<!-- apexchart js-->
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0 (1 August, 2024)

Initial Release