DashQ - Multipurpose Bootstrap 5 HTML Admin & Dashboard Template

1. Introduction

DashQ 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 DashQ 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
│
├── crm/
├── documentation/
│   ├── documentation.html/   # Online documentation (this file)
│
├── events/
├── examples/
├── fintech/
├── hrms/
├── layouts/
├── pages/
├── projects/
├── vendor/
├── widgets/
│
└── 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 from ThemeForest.
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-indigo">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="index, follow">
    <meta name="author" content="EdgeUI">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">

    <title>DashQ | Admin Dashboard Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" href="../assets/images/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">

    <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap-icons.css">
    <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">

    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/layout-main.css">
</head>

<body class="layout-main">

    <div class="app-wrapper">

        <header class="sticky-top px-lg-3">
            <div class="container-fluid"></div>
        </header>

        <aside class="navbar navbar-expand-lg align-items-start px-2 px-lg-3 px-xl-4 py-2"></aside>

        <div class="rightbar text-center d-flex flex-lg-column justify-content-between px-3 px-lg-0 py-2 py-lg-3"></div>

        <main class="app-body rounded-4 border">
            <div class="page-header py-2 py-lg-4 p-lg-4">
                <div class="container-fluid"></div>
            </div>

            <div class="py-2 py-lg-4 p-lg-4">
                <div class="container-fluid">
                    <!-- Your code here -->
                </div>
            </div>
        </main>

        <footer class="px-lg-3 py-2">
            <div class="container-fluid"></div>
        </footer>

    </div>

    <script src="assets/vendor/bootstrap/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/js/app.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)

DashQ 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 dashQ_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 dashq_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 dashq_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 dashq_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

DashQ 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

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

Feature	Key	Persistent?
Light / Dark Theme	`DashQ_admin_theme_mode`	Yes
Accent Color	`DashQ_admin_primary`	Yes
Font Family	`DashQ_admin_font`	Yes
Font Size	`DashQ_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

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

12. Licensing Reminder

This template is licensed under the ThemeForest Regular / Extended License depending on your purchase.

You may use the template in one end product.
You cannot resell or redistribute the template itself.
You may modify the source code to fit your project needs, while respecting the license terms.

For detailed terms, please refer to Envato's license page.

Daniel Scott

Documentation

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

12. Licensing Reminder