AirFlow - Bootstrap Admin Dashboard Template

1. Introduction

AirFlow is a developer-friendly Admin & SaaS Dashboard Template built with Bootstrap, designed to help you launch powerful web apps faster without sacrificing performance, flexibility, or design quality.

This documentation will guide you through installation, structure, customization, and common troubleshooting tips.

For the best experience, open the template in a modern browser like Chrome, Edge, or Firefox.

2. Requirements

Before using the template, make sure you have the following:

Requirement	Recommended
Bootstrap	5.3+
Node.js (optional)	16+ (for SCSS / dev tools)
Browsers	Latest Chrome, Edge, Firefox, Safari

👉 You can use AirFlow Admin with pure HTML only (no build tools required).

Using SCSS and NPM is optional and recommended for advanced customization.

3. Folder Structure

Below is the default structure of the downloaded package:

HTML/
├── apps/
├── assets/
│   ├── css/              # Compiled CSS
│   ├── font/             # font file
│   ├── js/               # Custom JS (theme, toggles, etc.)
│   ├── vendor/           # Vendor file
│   └── images/           # Images & icons
│
├── documentation/
│   ├── documentation.html/   # Online documentation (this file)
└── index.html            # Main dashboard (demo)

You can rename folders as needed, but we recommend keeping this structure for easier updates and support.

4. Installation / Getting Started

4.1 Method 1 - Static HTML

Unzip the downloaded file.
Go to the HTML/ folder or root index.html.
Open index.html in your browser.

Now you can start editing the HTML as needed.

4.2 Method 2 - Local HTTP server

You can use any simple HTTP server (e.g. VSCode Live Server, http-server, etc.). Example:

npx live-server

4.3 Method 3 - NPM / SCSS workflow (optional)

If the package includes package.json and SCSS sources:

npm install
npm run dev   # or npm run build

This enables:

SCSS compilation
Minified CSS/JS builds
Easier theme customization

5. Template Structure (HTML)


<!DOCTYPE html>
<html lang="en" data-bs-theme="light" data-theme="theme-orange">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="index, follow">
    <meta name="author" content="EdggeUI">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="Bootstrap Admin Template, CRM Dashboard, Admin Panel, Bootstrap 5 Dashboard, Project Management, Analytics Template, Responsive Admin">
    <meta name="description" content="AirFlow is a Bootstrap Admin & SaaS dashboard template with smart customization, multiple dashboards, ready-to-use apps, and developer-friendly code.">
    <!-- end::AirFlow Meta Basic -->

    <!-- begin::AirFlow Website Page Title -->
    <title>AirFlow - Bootstrap Admin Dashboard Template</title>

    <!-- begin::AirFlow Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- begin::AirFlow Favicon Tags -->
    <link rel="icon" type="image/png" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-icon-180x180.png">

    <!-- begin::Bootstrap css and icon -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap-icons.css">
    <!-- begin::Vendor css -->
    <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">

    <!-- begin::AirFlow CSS Stylesheet -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/layout-main.css">
    <link rel="stylesheet" href="assets/css/charts.css">
</head>

<body class="layout-main tab-home-tab">
    <div class="app-wrapper">
        <!-- begin::Page header -->
        <header class="page-header py-2 px-lg-3">
        </header>
        <!-- begin::Sidebar menu -->
        <aside class="navbar navbar-expand-xl flex-column">
            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasSidebar">
            </div>
            <!-- begin:: Main tab menu icon -->
            <div class="tab-menu p-2 rounded-pill border shadow-sm">
            </div>
        </aside>
        <!-- begin::Quik Action right bar -->
        <div class="rightbar text-center d-flex flex-lg-column justify-content-between px-3 px-lg-0">
        </div>
        <!-- begin::Content -->
        <main class="app-body py-2 px-lg-2 py-lg-3">
        </main>
        <!-- begin::Footer -->
        <footer class="py-2 px-lg-3">
        </footer>
    </div>
    <!-- offcanvas: Chat Drawer -->
    <div class="offcanvas m-md-4 rounded-4 offcanvas-end" tabindex="-1" id="chat_drawer">
    </div>

    <!-- begin::AirFlow Vendors Scripts -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/momentjs/moment.min.js"></script>
    <script src="assets/vendor/daterangepicker/daterangepicker.min.js"></script>
    <script src="assets/vendor/sortablejs/sortable.min.js"></script>
    <script src="assets/vendor/apexcharts/apexcharts.js"></script>

    <!-- begin::AirFlow App Custom Scripts -->
    <script src="assets/js/app.js"></script>
    
    <!-- begin::AirFlow page specific script -->
    <script src="assets/js/index.js"></script>
</body>
</html>

The layout is fully responsive. On smaller screens, the sidebar turns into an off-canvas panelcontrolled by the mobile menu button.

6. Customization

6.1 Light / Dark Theme (Bootstrap Native)

AirFlow Admin uses Bootstrap's data-bs-theme attribute to toggle light/dark:

<html data-bs-theme="dark">
<html data-bs-theme="light">

The toggle button in the header updates this attribute and saves the preference in localStorage under the key AirFlow_admin_bs_theme.

6.2 Accent / Brand Color

The primary brand color is controlled via the Bootstrap variable --bs-primary:


:root {
--bs-card-bg: #ffffff;
--bs-card-bg-rgb: 255, 255, 255;
--bs-border-color: #eeeeee;
--bs-border-color-translucent: rgba(0, 0, 0, 0.1);
--bs-link-color-rgb: var(--bs-primary-rgb);
--text-black-50: rgba(0, 0, 0, 0.5);
--app-border: #ffffff;

/* Typography */
--app-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--base-font-size: 16px;
--font-scale: 1; /* small=0.9, medium=1, large=1.1 */

--transition-3s: all ease-in-out 0.3s;
}

[data-bs-theme="dark"] {
--bs-body-bg: #000000;
--bs-card-bg: #000000;
--bs-card-bg-rgb: 0, 0, 0;
--bs-border-color: #ffffff1a;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--app-border: #1f1f1f;

--bs-card-bg-rgb: 31, 31, 31;
--text-black-50: rgba(255, 255, 255, 0.5);
}

/* Theme presets - only touch Bootstrap primary */
[data-theme="theme-purple"] {
--bs-primary: #7c3aed;
--bs-primary-dark: #5b21b6;
--bs-primary-rgb: 124, 58, 237;
--bs-app-body: #f6f6f6;
}

The “Display settings” dropdown in the header lets users switch accent colors or pick a custom one.The value is stored in localStorage under AirFlow_admin_primary.

6.3 Font Family

Fonts are controlled with a single CSS variable:

:root {
--app-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Preconfigured fonts in the UI:

Inter
DM Sans
Poppins
Space Grotesk

The selection is saved under AirFlow_admin_font.

6.4 Global Font Size (Small / Medium / Big)

Global typography is scaled with a --font-scale variable:

:root {
--base-font-size: 14px;  /* default medium */
--font-scale: 1;         /* 0.9 = small, 1 = medium, 1.1 = big */
}

html {
font-size: calc(var(--base-font-size) * var(--font-scale));
}

The size options (Small / Medium / Big) in the header store their choice in localStorage using the key AirFlow_admin_font_size.

6.5 Sidebar Navigation & Submenus

To add a simple sidebar item:

<li>
<a href="index.html"> <span class="icon-pill"><i class="bi bi-credit-card"></i></span>Payments </a>
</li>

To add a collapsible submenu:

<li>
<a class="has-sub" data-bs-toggle="collapse" href="#submenuReports">
    <span class="icon-pill"><i class="bi bi-bar-chart"></i></span>
    Reports
    <i class="bi bi-chevron-down chevron"></i>
</a>
<div class="collapse" id="submenuReports">
    <ul class="nav-modern sub-nav">
        <li><a href="reports-daily.html">Daily Reports</a></li>
        <li><a href="reports-monthly.html">Monthly Reports</a></li>
    </ul>
</div>
</li>

6.6 Charts Integration

AirFlow Admin includes chart placeholders only (no heavy chart library forced).

<div class="chart-placeholder">
<!-- Attach your chart library here -->
<div id="chart-revenue"></div>
</div>

Example with ApexCharts:

var options = {
chart: { type: "area", height: 260 },
series: [{ name: "Revenue", data: [31, 40, 28, 51, 42, 85, 77] }],
xaxis: { categories: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"] }
};

var chart = new ApexCharts(document.querySelector("#chart-revenue"), options);
chart.render();

6.7 Creating New Pages

Duplicate index.html and rename (e.g. customers.html).
Update the sidebar link to point to the new file.
Change the page main title and content area.

7. JavaScript Enhancement Features

AirFlow Admin uses a small custom JS file to enhance UX (no heavy dependencies):

Feature	Key	Persistent?
Light / Dark Theme	`AirFlow_admin_theme_mode`	Yes
Accent Color	`AirFlow_admin_primary`	Yes
Font Family	`AirFlow_admin_font`	Yes
Font Size	`AirFlow_admin_font_size`	Yes

If JavaScript is disabled, the layout and base content will still load. Only interactive theme controls will be inactive.

8. Updating Bootstrap

CDN references can be updated easily to a newer version:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

When upgrading versions, test:

Sidebar collapse
Dropdowns (user menu, notifications)
Theme toggles

9. Credits

AirFlow Admin uses only open-source and free assets:

Bootstrap - MIT License
Bootstrap Icons - MIT License
Google Fonts (Inter, DM Sans, Poppins, Space Grotesk)
Illustrations & placeholders - Free for commercial use (undraw / storyset / etc.)

No premium or paid assets are included in the downloadable package.

10. Support

If you face any issues that are not covered in this documentation, you can contact our support:

Email: edggeui@gmail.com
Support hours: Monday - Friday, 10:00 - 18:00 (IST timezone)

Support covers template bugs and basic questions. Custom work, new features or integration with your own backend are not included in free support.

11. Changelog

Keep track of template updates here:

v1.0.0 - Initial Release
- First release of AirFlow Admin Dashboard
- Dark / Light mode with Bootstrap 5.3 theme system
- Accent color switcher (with localStorage)
- Font family & font size controls
- Transactions table, stats cards, activity & health widgets

Documentation

Daniel Scott

$21,328.00

Expenses Analysis

1. Introduction

2. Requirements

3. Folder Structure

4. Installation / Getting Started

4.1 Method 1 - Static HTML

4.2 Method 2 - Local HTTP server

4.3 Method 3 - NPM / SCSS workflow (optional)

5. Template Structure (HTML)

6. Customization

6.1 Light / Dark Theme (Bootstrap Native)

6.2 Accent / Brand Color

6.3 Font Family

6.4 Global Font Size (Small / Medium / Big)

6.5 Sidebar Navigation & Submenus

6.6 Charts Integration

6.7 Creating New Pages

7. JavaScript Enhancement Features

8. Updating Bootstrap

9. Credits

10. Support

11. Changelog

Chat

Design Team