HTML Β· jQuery Β· Bootstrap 5.3

APIC Bootstrap 5 Admin Dashboard Template Documentation

APIC is a premium, responsive Bootstrap 5 admin dashboard template with charts, data tables and dark mode, built using HTML, SCSS and jQuery. It comes with light, dark, vertical, horizontal, boxed and RTL layouts, and lots of reusable and beautiful UI elements, widgets and more features.

This guide explains how to install, run and build the template, how the project is organised, how the production build protects your code, how to change colours and themes, and how to add pages. Read it before you start customizing; it will save you time.

The template supports custom admin panels, super admin dashboards, SaaS dashboards, CRM admin panels, project management, accounting, eCommerce, analytics and sales dashboards.

80+ PagesRTL & Dark ModeVertical & HorizontalGulp BuildObfuscated Output
Overview

What is APIC Bootstrap Admin Dashboard?

APIC is an HTML admin dashboard template for developers who want a head start on a back-office interface. It gives you authentication pages, charts UI, components, UI kits, utilities and application UIs such as task list, chat, mailbox, notes, Kanban board and invoices, all as plain HTML on top of Bootstrap 5.3, SCSS and jQuery.

The code is well structured, which makes installation, setup and customization easy. The template is completely responsive and works across all modern browsers and mobile devices. Your purchase includes detailed documentation (this page), one year of free support and unlimited updates.

An Angular version is also available: Apic - Angular 22 Admin Dashboard Template.

Tip β€” New to the project? Read Folder Structure first. Most edits start there.
Highlights

Key Features of the Bootstrap Admin Dashboard

Everything included in the APIC Bootstrap Admin Dashboard template at a glance.

80+ PagesRTL, Dark and Horizontal LayoutEnd 2 End Front End SolutionCreate, Manage, Delete Note's UICreate, Manage, Delete Task's UIGrid and List Invoice UI'sForm validation and UI submissionDark and Light sidebar themesHorizontal and Vertical DemoCompact and Colored sidebarEasy to Customize componentsContacts and Email UIForm, Tables and ChartsData TablesAdvanced UI like drag and drop, range slider, rating, alertify, etc.

Beyond the list: the vertical, horizontal and boxed layouts are switchable at runtime, the sidebar ships in light, dark, compact and colored styles, and RTL is a CSS-only switch of the same stylesheet. Forms include validation and wizard examples, tables include sorting, filtering and Excel/PDF export, and the advanced UI section adds drag and drop, range slider, rating, countdown, lightbox, SweetAlert2 and alertify notifications.

Who It's For

Built for Every Kind of Admin Dashboard

Custom admin panels, Bootstrap dashboards, super admin dashboards, accounting dashboards, project management, eCommerce admin panels, analytics admin panels, sales dashboards, CRM admin panels and SaaS-based interfaces.

πŸ› 

Custom & Super Admin Panels

Start from a finished layout, sidebar, topbar and theme instead of a blank project.

☁️

SaaS Admin Dashboards

Reuse the widgets, charts, tables and forms as the interface of a SaaS product.

πŸ“Œ

CRM & Project Management

Contacts, Kanban board, task list, notes and calendar cover the CRM basics.

πŸ›’

eCommerce, Sales & Accounting

Invoices, DataTables, pricing and analytics charts for orders and billing.

Stack

Built With

The core stack is Bootstrap 5.3, jQuery 3.7, Sass and Gulp 5. Everything else (charts, calendar, editors, pickers) is listed under Dependencies.

πŸ…±
Bootstrapv5.3
⚑
jQueryv3.7
🎨
SassDart Sass
πŸ”§
Gulpv5
Compatibility

Browser Support

APIC is tested on modern desktop and mobile browsers. Bootstrap 5.3's responsive grid keeps the interface usable from small phones to large monitors.

ChromeFirefoxSafariEdgeiOS SafariAndroid Chrome

Setup

Getting Started

You only need Node.js. There is no backend or database to install; every page is static HTML.

1

Open the project folder

Unzip and move into apic-html.

# Move into the project directory
cd apic-html
2

Install dependencies

Installs every runtime and dev dependency listed in package.json and copies the libraries the pages use into dist/assets/libs when you build.

# npm 11 is pinned in packageManager
npm install
3

Run the dev server

Builds dist/ in readable form, opens Browsersync and rebuilds on every change to a page, partial, SCSS or script.

# Dev server with live reload
npm start
4

Build for production

Writes the optimized site to dist/: minified, class names scrambled, JavaScript obfuscated. Upload the contents of dist/ to any static host. Details.

# Production build
npm run build
5

Build a readable copy

Same build without the scrambling and obfuscation, handy when you need to debug the output.

# Readable dist/
npm run build:dev
Setup

Production Build

Minified HTML, scrambled class names and obfuscated JavaScript, from one command.

npm run build builds dist/ and then runs tools/optimize.js on it. The files in src/ are never touched.

Class names

Every CSS class is replaced by a short random-looking name (wjsds, ybeb1). HTML, CSS and scripts are rewritten together so they stay in sync.

JavaScript

Your page scripts are minified with Terser and obfuscated (string array, control-flow flattening). Libraries are not obfuscated.

HTML & CSS

Pages are minified and comments are removed. The JSON-LD in each page stays readable for search engines, only compacted.

Cache busting

Stylesheets and scripts get ?v=<hash>, so browsers pick up a new build at once.

What is renamed and what is kept

The names are generated from a hash of the original class, so the same class gets the same new name on every build and a browser holding an older stylesheet never disagrees with a newer page. Some names are deliberately kept, because renaming them would break the page:

  • Classes that a third-party plugin writes itself, for example the Bootstrap helper classes DataTables, SweetAlert2 or the session-timeout dialog put on their markup (btn, dropdown-item, form-control, col-* …). Those stay readable; the rest of the Bootstrap and APIC classes are scrambled.
  • Classes that only a plugin's own stylesheet defines (ck-*, swal2-*, apexcharts-* …) and the whole family around them.
  • Icon classes (mdi-*, uil-*, ti-*), names that are also element ids or layout ids, and dark / light.
Write whole class names in your scripts. The optimizer follows classes it can see as text. addClass("btn-" + type) keeps every class that starts with btn- unscrambled; addClass(map[type]) with a lookup object of whole names ({ primary: "bg-primary" }) is scrambled correctly.
Edit src/, never dist/. If you need to read the output, run npm run build:dev. npm start always serves the readable build. A second optimize run on an already optimized dist/ is refused; run npm run build again.

Check the result

After a production build open a few pages in the browser and look at the console. The build was checked against the readable build page by page (screenshots and console errors), but a plugin you add yourself may need a keep rule in tools/optimize.js. VERBOSE=1 npm run build lists the most-used classes that were kept and which library kept them.

# Which classes stayed readable, and why
VERBOSE=1 npm run build
Codebase

Folder Structure

Pages and partials live in src/; everything Gulp generates goes to dist/. Styles and scripts are under src/assets/.

apic-html/
β”œβ”€β”€ src/ # Everything you edit
β”‚   β”œβ”€β”€ *.html # 83 pages, built from the partials with @@include
β”‚   β”œβ”€β”€ partials/ # head, topbar, sidebar, topnav, footer, right-sidebar, layout options
β”‚   β”œβ”€β”€ app-settings.json # Name, URLs and theme color used for SEO tags and JSON-LD
β”‚   β””── assets/
β”‚       β”œβ”€β”€ scss/ # Bootstrap 5.3 + APIC styles (app.scss, icons.scss)
β”‚       β”œβ”€β”€ js/ # layout-init.js, layout.js, app.js, colors.js, ckeditor5.js
β”‚       β”œβ”€β”€ js/pages/ # One *.init.js per demo page
β”‚       β”œβ”€β”€ images/
β”‚       β””── fonts/
β”œβ”€β”€ tools/ # variants.js (RTL), optimize.js (production build)
β”œβ”€β”€ dist/ # Build output, generated: never edit
β”œβ”€β”€ documentation/ # Multi-page documentation sources
β”œβ”€β”€ static-files/ # This documentation page and the preview page
β”œβ”€β”€ gulpfile.js # Build: npm start, npm run build
└── package.json
Styles live in src/assets/scss/. See Colors & SCSS.
Theming

Colors & SCSS Variables

Theme colours are Bootstrap 5.3 Sass variables in src/assets/scss/_bootstrap-overrides.scss. Change a value there and every button, badge, alert and chart follows.

Primary#3051d3
Secondary#564ab1
Success#3ddc97
Info#00a7e1
Warning#f2994a
Danger#eb5757

Editing a colour

// src/assets/scss/_bootstrap-overrides.scss
$primary: #3051d3,
$secondary: #564ab1,
$success: #3ddc97,

Other SCSS files: _variables.scss holds APIC-only variables (sidebar width, header height…), _theme.scss holds the light and dark colour tokens, app.scss is the compiled entry point (Bootstrap + APIC) and icons.scss compiles the icon fonts. Gulp compiles them to dist/assets/css/app.min.css and icons.min.css.

Theming

Dark Mode, RTL & Sidebar Themes

Switch light and dark mode, LTR and RTL, vertical and horizontal layout, boxed width and sidebar style from the layout options. Nothing navigates and no second stylesheet is loaded.

Dark mode. Colours are CSS custom properties scoped to data-bs-theme="light" and data-bs-theme="dark" on <html>. To add or change a colour, edit the light block and the dark block in src/assets/scss/_theme.scss.

RTL. dir="rtl" on <html> switches the same stylesheet to its mirrored rules (generated by tools/variants.js), which suits Arabic, Hebrew and Persian interfaces.

Sidebar. Choose light, dark or colored sidebar, the default or compact size, plus fluid or boxed width, and vertical or horizontal navigation.

How it is applied. assets/js/layout-init.js runs before the page paints, reads the saved options from localStorage (key apic-layout) and sets the matching attributes and body classes. A link such as index.html?theme=dark&dir=rtl&layout=horizontal applies and saves the options it names.

# theme light | dark
# dir ltr | rtl
# layout vertical | horizontal
# width fluid | boxed
# sidebar light | dark | colored
# sidebarSize default | compact
Chart colours follow the active theme: they are read from the --apic-chart-* variables by assets/js/colors.js.

Structure

Layout & Sidebar Menu

A vertical or horizontal layout with topbar, search, notifications and profile dropdown, a right-side layout panel, and a content area. The sidebar is collapsible on desktop and off-canvas on mobile.

Adding a menu item

Every page includes the same partials, so edit once. Add the link to src/partials/sidebar.html for the vertical menu and to src/partials/topnav.html for the horizontal menu.

<li><a class="side-nav-link" href="reports.html">Reports</a></li>

Starting a new page

Copy src/pages-starter.html. It already includes the head, topbar, sidebar, footer and layout panel with @@include("partials/…"). Gulp fills in the title, description, canonical URL and JSON-LD from the title.html include and app-settings.json.

Screens

Pages

83 pages, each a working HTML page, not a mockup. See them live on the preview page.

🏠 Dashboard & Apps

DashboardChatMailboxRead MailCompose MailNotesTodo ListKanban BoardInvoiceContactsCalendar

πŸ” Authentication

LoginRegisterRecover PasswordLock ScreenError 400Error 404Error 500

πŸ“„ Utility Pages

Starter PageMaintenanceComing SoonTimelineGalleryFAQsPricing

πŸ“ Forms

Form ElementsAdvanced ElementsForm ValidationForm WizardInput MaskCKEditorSummernoteFile Uploads

πŸ“Š Tables, Charts & Maps

Basic TablesDataTablesEditable TableResponsive TableApexChartsChart.jsChartistFlotMorrisjQuery KnobSparklineGoogle MapsVector Maps

🎨 Icons

Material Design IconsDripiconsFont AwesomeThemifyUnicons
UI Library

UI Components

A complete Bootstrap 5.3 component set plus advanced widgets for real admin workflows. Each demo page has the markup and the initialisation script you need.

AlertsBadgesBreadcrumbButtonsCardsCarouselColorsDropdownsGridImagesJumbotronModalsNavsPaginationTooltips & PopoversProgress BarsSpinnersTabs & AccordionsTypographyVideoAlertifyBlocker UICountdownDragula (Drag & Drop)LightboxNestable ListsNotificationsRange SliderRatingSession TimeoutSweetAlert2Typeahead

Reference

Dependencies

The packages APIC is built on, taken from this project's package.json. gulp libs (part of every build) copies the files the pages load from node_modules into dist/assets/libs/.

Core

PackageUsed for
bootstrap, @popperjs/coreCSS and layout framework with the positioning engine (Bootstrap 5.3.8)
jquery, jquery-ui-distjQuery 3.7 and jQuery UI, needed by most of the plugins below
metismenu, simplebar, node-wavesCollapsible sidebar menu, custom scrollbars and button ripple
momentDate handling

Charts & maps

PackageUsed for
apexcharts, chart.js, chartist, chartist-plugin-tooltips-updatedApexCharts, Chart.js and Chartist
flot-charts, flot-spline, jquery.flot.tooltip, morris.js, raphaelFlot and Morris charts
jquery-knob, jquery-sparklineKnob dials and sparklines
jqvmap, gmapsVector and Google maps
fullcalendar, @fullcalendar/bootstrap5Calendar app

Tables

PackageUsed for
datatables.net, datatables.net-bs5 and the buttons, responsive, autofill and keytable extensionsDataTables 2 with Bootstrap 5 styling and export buttons
jszip, pdfmakeExcel and PDF export for tables
bootstrap-editable, RWD-Table-PatternsEditable and responsive tables

Forms & inputs

PackageUsed for
ckeditor5, summernote, tinymceRich text editors
jquery-validation, parsleyjsForm validation
air-datepicker, spectrum-colorpickerDate and color pickers
selectize, bootstrap-maxlength, bootstrap-touchspin, inputmask, twbs-paginationSelect, character counter, spinner, masks and pagination
dropzone, dropifyFile uploads
ion-rangeslider, nouisliderRange sliders
bootstrap-ratingStar rating

Advanced UI & utilities

PackageUsed for
dragula, sortablejs, nestable2Drag and drop, sortable and nestable lists, Kanban board
sweetalert2, alertifyjs, node-snackbarDialogs and notifications
@curiosityx/bootstrap-session-timeout, jquery-blockui, jquery-countdown, jquery-counttoSession timeout, blocker overlay, countdown and counters
magnific-popup, isotope-layoutLightbox and filterable gallery
@iconscout/uniconsUnicons icon set

Build tooling (dev only, never shipped)

PackageUsed for
gulp 5, gulp-sass, sass, gulp-postcss, autoprefixer, gulp-clean-css, rtlcssCompile SCSS, prefix, minify and produce the RTL rules
gulp-file-include, browser-sync, gulp-imageminPage partials, dev server and images
terser, html-minifier-terser, javascript-obfuscator, postcss-selector-parserProduction build: minify, scramble class names, obfuscate
Reference

Security & Vulnerabilities

Result of npm audit run against this project's lockfile on 2026-11-03: 58 advisories across 1,263 resolved packages. Severity follows the npm scale: critical, high, moderate and low. Re-run the audit before every release; the numbers change as advisories are published.

4 critical 23 high 30 moderate 1 low 58 total Β· 1,263 packages (562 production, 701 dev)

Advisories by direct dependency

The table groups the advisories by the package you installed. Several advisories can hang off one of them.

PackageSeverityDependencyUsed by / where in the projectAdvisoryFix (semver)
decompress β†’ bin-build β†’ gulp-imageminCriticalDirect (gulp-imagemin)Image optimizer package listed in package.json; its compressor tooling runs at install time. Not in the pages.Archive extraction can write files outside the target folder (Zip Slip, 2 advisories). The same chain carries more advisories (got, file-type, uuid, cross-spawn, fast-xml-parser …).Upgrade gulp-imagemin (semver-major); only run installs on trusted networks until then
minimist ← optimist ← sifter ← selectizeCriticalDirect (selectize)selectize 0.12.6 is loaded by the Advanced Form Elements page. The vulnerable minimist and csv-parse are reached through its sifter dependency (also installed through @iconscout/unicons for minimist).Prototype pollution in minimist 0.x (2 advisories); csv-parse prototype replacementFix available for the transitive packages (npm audit fix)
tinymceHighDirectThe build copies it to dist/assets/libs/tinymce, but no page loads it (the editor pages use CKEditor 5 and Summernote). Unused, yet uploaded with the site.Cross-site scripting through iframes and external SVG objects (versions up to 6.8.6)Remove tinymce from package.json and from the libs list in gulpfile.js, or upgrade to TinyMCE 8 (semver-major)
@iconscout/unicons β†’ axios, svgo, follow-redirects, nth-check, css-selectHighDirect (@iconscout/unicons)Icon font package; the advisories sit in its font-build tooling (SSRF/CSRF in axios, svgo script handling). Not in the browser bundle.SSRF and CSRF in axios, SVGO removeScripts, ReDoS in nth-checkUpgrade to @iconscout/unicons 4.x (semver-major)
chartist-plugin-tooltips-updated β†’ lodashHighDirectChartist tooltips plugin, loaded by the Chartist demo. lodash is only an install-time dependency of the plugin: the plugin file served to the browser does not include it.lodash code injection through _.template and prototype pollution (up to 4.17.23)Fix available (npm audit fix)
gulp-sourcemaps β†’ postcss, css β†’ source-map-resolve β†’ decode-uri-componentHighDirect (gulp-sourcemaps)Build tooling only.PostCSS parsing and style-tag stringify issues; denial of service in decode-uri-componentUpgrade or remove gulp-sourcemaps (semver-major)
image-sizeHighDirectUsed by the Gulp build to add width and height to images. Build tooling only.Denial of service through infinite loops in the JXL, HEIF and ICNS parsers (up to 2.0.2)Upgrade to 2.0.4 (semver-major)
javascript-obfuscator β†’ @vercel/blob β†’ @vercel/oidc β†’ zod; multimatch β†’ minimatchHighDirect (javascript-obfuscator)Production build tooling only (obfuscates your own scripts in dist/). Not shipped.zod can exhaust memory on oversized collections; minimatch denial of serviceFix available for the @vercel packages; the minimatch advisory has no usable fix yet
jqvmap β†’ jquery 1.xModerateDirectVector map demo. The old jQuery sits in node_modules/jqvmap only; the page uses the template's own jQuery 3.7, so it is not uploaded.jQuery XSS advisories (up to 3.4.1)Upgrade jqvmap (semver-major); low risk as shipped
morris.jsModerateDirectMorris chart demo. Ships in the browser.Cross-site scripting (GHSA-fwx5-5fqj-jv98)No fix yet; do not feed it untrusted labels
browser-sync β†’ resp-modifier β†’ minimatchModerateDirectDevelopment server only.minimatch denial of serviceUpgrade or ignore; the dev server is not deployed
gulp-newer β†’ glob β†’ minimatchModerateDirectBuild tooling only.minimatch denial of serviceUpgrade gulp-newer (semver-major)
sweetalert2LowDirectSweetAlert2 demo. Ships in the browser.Version 9.17.4 contains hidden functionality (GHSA-pg98-6v7f-2xfv)Pin another 9.x version or upgrade (check the changelog)

What this means for your site

Most advisories are build tooling. The image compressors, source maps, Browsersync and the obfuscator run on your machine while you build; they are not in the files you upload. Run installs and builds on a trusted network and keep the lockfile under review.

Two packages that pages load do ship to the browser with an advisory: morris.js (XSS: never pass untrusted text as a label) and sweetalert2 9.17.4 (flagged for hidden functionality: check the advisory and pick another 9.x version or upgrade before shipping the SweetAlert page). If you do not need a demo, delete the page and remove the package.

One unused package is uploaded anyway: the build copies tinymce into dist/assets/libs although no page loads it. Remove it so its XSS advisory does not ship with your site.

# Full report
npm audit

# Apply non-breaking fixes only
npm audit fix
npm audit fix --force applies semver-major bumps and can break working code. Run a production build and open the affected demo pages by hand after any major upgrade.
Releases

Changelog

What changed in each release of the APIC Bootstrap 5 admin dashboard template. Updates are free for the life of your license; the newest release is listed first.

Version 1.0.0

LatestNovember 2026
Updated dependencies
PackageBeforeNow
Bootstrap4.4.15.3.8
Popperpopper.js 1.x (separate package)Popper 2 (bundled with Bootstrap 5)
Sass compilernode-sass via gulp-sass 4Dart Sass 1.x (gulp-sass)
Sass imports@import@use modules
jQuery3.4.13.7.1
Gulp45
DataTablesdatatables.net-*-bs4datatables.net-*-bs5 (DataTables 2)
Summernotesummernote-bs4summernote-bs5 0.9.1
metisMenu3.0.x3.0.7 (pinned: 3.1 needs jQuery 4)
Sass
  • The stylesheets moved from @import to the @use module system, compiled with Dart Sass (node-sass is gone).
  • Bootstrap 5.3 is compiled together with the Apic overrides; dark mode is Bootstrap's own color mode (data-bs-theme) inside the same stylesheet.
  • The separate dark stylesheets (app-dark, bootstrap-dark) are removed. RTL is generated from the same CSS with rtlcss.
Bootstrap 4 to 5
  • All pages and partials converted: data-toggle to data-bs-toggle, ml-*/mr-* to ms-*/me-*, float-right to float-end, font-weight-* to fw-*, custom-select to form-select, badge-pill to rounded-pill and .close to .btn-close.
  • Page scripts updated to the Bootstrap 5 class and attribute names. The Bootstrap plugins are exposed to jQuery early, so existing $(el).modal() and tooltip() calls keep working.
Removed dependencies
  • popper.js, bootstrap-colorpicker, slick-slider, counterup, waypoints, bootstrap-datepicker, bootstrap-daterangepicker and datatables.net-select: no page used them.
Changed
  • One application instead of four copies (main, dark, RTL, horizontal): light and dark, LTR and RTL, vertical and horizontal, boxed and the sidebar variants are switched without leaving the page.
  • Pages load app.min.css and icons.min.css only; libraries are copied from an explicit list in gulpfile.js into assets/libs/<package>/.
  • Page titles, descriptions, canonical and Open Graph tags, JSON-LD, sitemap.xml and robots.txt are generated by the build.
New releases are added to this section. Re-download the product from your account to get the latest files, and compare them with your project before merging.

FAQ

Frequently Asked Questions

Answers to the questions we hear most about the APIC Bootstrap Admin Dashboard template.

General
What is the APIC Bootstrap Admin Dashboard Template?
A responsive HTML admin dashboard template built with Bootstrap 5.3, SCSS and jQuery. It includes 80+ pages, vertical, horizontal and boxed layouts, RTL and dark mode, and a large set of reusable UI elements, widgets, charts, tables and application screens.
What can I build with it?
Custom admin panels, super admin dashboards, SaaS dashboards, CRM and project management tools, accounting dashboards, eCommerce admin panels, analytics and sales dashboards.
Do I need a framework such as React or Angular?
No. Pages are plain HTML files that load Bootstrap 5.3 and jQuery. Gulp assembles them from partials (head, topbar, sidebar, footer) so you edit each piece once. If you prefer Angular, an Angular 22 version is available: Apic - Angular 22 Admin Dashboard Template.
Does it work on phones and tablets?
Yes. The layout is fully responsive: the sidebar becomes an off-canvas drawer on small screens, tables scroll inside their container and cards stack into a single column.
What is the best Bootstrap admin template in 2026?
The best Bootstrap admin template depends on your stack, but APIC is a premium admin dashboard template built for 2026 projects: Bootstrap 5.3, SCSS and jQuery, 80+ HTML pages, dark mode, RTL, vertical and horizontal layouts, seven chart libraries and DataTables. Compare any admin dashboard template on those points before you buy.
Is APIC a good Bootstrap 5 admin template for developers?
Yes. The source is plain HTML, readable SCSS and jQuery page scripts, assembled with Gulp from partials (head, topbar, sidebar, footer), so you edit each piece once. There is no framework to learn, no database and no runtime build on your server, which makes it a practical Bootstrap 5 admin template for developers who want full control of the code.
Can I use APIC as an admin dashboard template for SaaS and startups?
Yes. APIC is a front end for SaaS dashboards, startup MVPs and internal tools. It includes login, register, recover password and lock screen pages, a pricing page, invoices, a Kanban board, mailbox and chat screens, so a startup can ship a polished admin dashboard faster. Connect the pages to your own API and authentication: APIC does not include a backend or multi-tenant logic.
Is APIC a responsive admin dashboard template?
Yes. The layout is responsive from phones to wide desktops: the sidebar becomes an off-canvas drawer on small screens, tables scroll inside their container and cards stack into a single column.
Installation & Setup
What do I need installed before I start?
Node.js (npm 11 is pinned in packageManager). There is no database or backend; every page is static HTML with demo data in the page scripts.
How do I run the project?
Run npm install once, then npm start. Gulp builds the site into dist/, opens a Browsersync server and rebuilds when you save a file.
How do I build for production?
Run npm run build. The pages, stylesheets and scripts in dist/ are minified, class names are replaced by short random names and the JavaScript is obfuscated. Run npm run build:dev for a readable dist/.
Why are the class names in dist/ unreadable?
That is the production build's class scrambling. It rewrites the HTML, the CSS and the scripts together so they stay in sync. Never edit dist/; change src/ and build again. See Production Build.
Customization
How do I change the brand colours?
Edit the palette in src/assets/scss/_bootstrap-overrides.scss; see Colors & SCSS. Every button, badge, alert and chart follows the new values.
How do I enable dark mode or RTL?
Use the layout options in the right sidebar, or open a page with ?theme=dark&dir=rtl. The choice is saved in the browser. Nothing navigates and no second stylesheet loads.
How do I add a new page?
Copy an existing page in src/ (for example pages-starter.html), change the title and content, then add a link in src/partials/sidebar.html and src/partials/topnav.html.
Can I delete the pages I do not need?
Yes. Delete the page from src/, its script in src/assets/js/pages/ and its menu entries in the two partials.
Components, Data & Charts
Which chart libraries are included?
ApexCharts, Chart.js, Chartist, Flot, Morris, jQuery Knob and jQuery Sparkline, each with a demo page. Colors follow the theme.
Is the data real?
No. Demo data lives in the page scripts in src/assets/js/pages/, so you can replace it with calls to your own API page by page.
Is there an admin template with charts and data tables?
Yes. APIC is an admin template with charts and data tables: ApexCharts, Chart.js, Chartist, Flot, Morris, jQuery Knob and Sparkline for charts, and DataTables with search, sorting, pagination, export buttons and editable tables. Demo data lives in the page scripts and is easy to replace with calls to your own API.
Is APIC also an admin dashboard UI kit?
Yes. Besides full pages, APIC ships a Bootstrap 5 UI kit with buttons, cards, modals, navs, tabs, accordions, forms, tables, five icon sets (Font Awesome, Material Design, Themify, Dripicons and Unicons) and advanced widgets, each on its own demo page that you can copy from.
Is APIC a dark mode admin template with RTL support?
Yes. Light and dark themes and right-to-left (RTL) layouts are built in, so it works as an admin template with dark mode and RTL out of the box. Switch them live from the layout options panel in the vertical, horizontal or boxed layout; the choice is saved in the browser.
Licensing & Support
What do I get when I buy?
The complete HTML, SCSS and JavaScript source, the Gulp build, detailed documentation, one year of free support and unlimited updates.
Can I use it in a commercial product?
Yes, within the scope of the license you purchase. Check the license terms on the product page before shipping a commercial product.
Where can I get the admin panel template download?
APIC is sold by LettStart Design on its product page. After purchase you get the complete HTML, SCSS and JavaScript source with the Gulp build and documentation, plus one year of free support and unlimited updates. Use the live preview to review every page before you download the admin panel template.
What are good ThemeForest alternatives for admin templates?
Buying directly from the developer is a common alternative to marketplace admin templates. When you compare, check the Bootstrap version, number of pages, dark mode and RTL, chart and table libraries, build tooling and the support period. APIC is sold directly by LettStart Design with Bootstrap 5.3, 80+ pages, dark mode, RTL, SCSS source and one year of free support.
Help

Support

Your purchase includes one year of free support and unlimited updates. Check the comments at the top of a page script, then this guide, before sending a question. Include your Node version, the command you ran and the steps to reproduce.

Ready to Build Your Admin Dashboard?

Get the full APIC Bootstrap Admin Dashboard source, every page, one year free support and unlimited updates.