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.
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.
Key Features of the Bootstrap Admin Dashboard
Everything included in the APIC Bootstrap Admin Dashboard template at a glance.
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.
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.
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.
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.
Getting Started
You only need Node.js. There is no backend or database to install; every page is static HTML.
Open the project folder
Unzip and move into apic-html.
cd apic-html
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 install
Run the dev server
Builds dist/ in readable form, opens Browsersync and rebuilds on every change to a page, partial, SCSS or script.
npm start
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.
npm run build
Build a readable copy
Same build without the scrambling and obfuscation, handy when you need to debug the output.
npm run build:dev
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, anddark/light.
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.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.
VERBOSE=1 npm run build
Folder Structure
Pages and partials live in src/; everything Gulp generates goes to dist/. Styles and scripts are under src/assets/.
βββ 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
src/assets/scss/. See Colors & SCSS.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.
Editing a colour
$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.
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.
# dir ltr | rtl
# layout vertical | horizontal
# width fluid | boxed
# sidebar light | dark | colored
# sidebarSize default | compact
--apic-chart-* variables by assets/js/colors.js.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.
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.
π Dashboard & Apps
π Authentication
π Utility Pages
π Forms
π Tables, Charts & Maps
π¨ Icons
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.
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
| Package | Used for |
|---|---|
| bootstrap, @popperjs/core | CSS and layout framework with the positioning engine (Bootstrap 5.3.8) |
| jquery, jquery-ui-dist | jQuery 3.7 and jQuery UI, needed by most of the plugins below |
| metismenu, simplebar, node-waves | Collapsible sidebar menu, custom scrollbars and button ripple |
| moment | Date handling |
Charts & maps
| Package | Used for |
|---|---|
| apexcharts, chart.js, chartist, chartist-plugin-tooltips-updated | ApexCharts, Chart.js and Chartist |
| flot-charts, flot-spline, jquery.flot.tooltip, morris.js, raphael | Flot and Morris charts |
| jquery-knob, jquery-sparkline | Knob dials and sparklines |
| jqvmap, gmaps | Vector and Google maps |
| fullcalendar, @fullcalendar/bootstrap5 | Calendar app |
Tables
| Package | Used for |
|---|---|
| datatables.net, datatables.net-bs5 and the buttons, responsive, autofill and keytable extensions | DataTables 2 with Bootstrap 5 styling and export buttons |
| jszip, pdfmake | Excel and PDF export for tables |
| bootstrap-editable, RWD-Table-Patterns | Editable and responsive tables |
Forms & inputs
| Package | Used for |
|---|---|
| ckeditor5, summernote, tinymce | Rich text editors |
| jquery-validation, parsleyjs | Form validation |
| air-datepicker, spectrum-colorpicker | Date and color pickers |
| selectize, bootstrap-maxlength, bootstrap-touchspin, inputmask, twbs-pagination | Select, character counter, spinner, masks and pagination |
| dropzone, dropify | File uploads |
| ion-rangeslider, nouislider | Range sliders |
| bootstrap-rating | Star rating |
Advanced UI & utilities
| Package | Used for |
|---|---|
| dragula, sortablejs, nestable2 | Drag and drop, sortable and nestable lists, Kanban board |
| sweetalert2, alertifyjs, node-snackbar | Dialogs and notifications |
| @curiosityx/bootstrap-session-timeout, jquery-blockui, jquery-countdown, jquery-countto | Session timeout, blocker overlay, countdown and counters |
| magnific-popup, isotope-layout | Lightbox and filterable gallery |
| @iconscout/unicons | Unicons icon set |
Build tooling (dev only, never shipped)
| Package | Used for |
|---|---|
| gulp 5, gulp-sass, sass, gulp-postcss, autoprefixer, gulp-clean-css, rtlcss | Compile SCSS, prefix, minify and produce the RTL rules |
| gulp-file-include, browser-sync, gulp-imagemin | Page partials, dev server and images |
| terser, html-minifier-terser, javascript-obfuscator, postcss-selector-parser | Production build: minify, scramble class names, obfuscate |
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.
Advisories by direct dependency
The table groups the advisories by the package you installed. Several advisories can hang off one of them.
| Package | Severity | Dependency | Used by / where in the project | Advisory | Fix (semver) |
|---|---|---|---|---|---|
| decompress β bin-build β gulp-imagemin | Critical | Direct (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 β selectize | Critical | Direct (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 replacement | Fix available for the transitive packages (npm audit fix) |
| tinymce | High | Direct | The 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-select | High | Direct (@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-check | Upgrade to @iconscout/unicons 4.x (semver-major) |
| chartist-plugin-tooltips-updated β lodash | High | Direct | Chartist 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-component | High | Direct (gulp-sourcemaps) | Build tooling only. | PostCSS parsing and style-tag stringify issues; denial of service in decode-uri-component | Upgrade or remove gulp-sourcemaps (semver-major) |
| image-size | High | Direct | Used 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 β minimatch | High | Direct (javascript-obfuscator) | Production build tooling only (obfuscates your own scripts in dist/). Not shipped. | zod can exhaust memory on oversized collections; minimatch denial of service | Fix available for the @vercel packages; the minimatch advisory has no usable fix yet |
| jqvmap β jquery 1.x | Moderate | Direct | Vector 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.js | Moderate | Direct | Morris 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 β minimatch | Moderate | Direct | Development server only. | minimatch denial of service | Upgrade or ignore; the dev server is not deployed |
| gulp-newer β glob β minimatch | Moderate | Direct | Build tooling only. | minimatch denial of service | Upgrade gulp-newer (semver-major) |
| sweetalert2 | Low | Direct | SweetAlert2 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.
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.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 2026Updated dependencies
| Package | Before | Now |
|---|---|---|
| Bootstrap | 4.4.1 | 5.3.8 |
| Popper | popper.js 1.x (separate package) | Popper 2 (bundled with Bootstrap 5) |
| Sass compiler | node-sass via gulp-sass 4 | Dart Sass 1.x (gulp-sass) |
| Sass imports | @import | @use modules |
| jQuery | 3.4.1 | 3.7.1 |
| Gulp | 4 | 5 |
| DataTables | datatables.net-*-bs4 | datatables.net-*-bs5 (DataTables 2) |
| Summernote | summernote-bs4 | summernote-bs5 0.9.1 |
| metisMenu | 3.0.x | 3.0.7 (pinned: 3.1 needs jQuery 4) |
Sass
- The stylesheets moved from
@importto the@usemodule 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 withrtlcss.
Bootstrap 4 to 5
- All pages and partials converted:
data-toggletodata-bs-toggle,ml-*/mr-*toms-*/me-*,float-righttofloat-end,font-weight-*tofw-*,custom-selecttoform-select,badge-pilltorounded-pilland.closeto.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()andtooltip()calls keep working.
Removed dependencies
popper.js,bootstrap-colorpicker,slick-slider,counterup,waypoints,bootstrap-datepicker,bootstrap-daterangepickeranddatatables.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.cssandicons.min.cssonly; libraries are copied from an explicit list ingulpfile.jsintoassets/libs/<package>/. - Page titles, descriptions, canonical and Open Graph tags, JSON-LD,
sitemap.xmlandrobots.txtare generated by the build.
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?
What can I build with it?
Do I need a framework such as React or Angular?
Does it work on phones and tablets?
What is the best Bootstrap admin template in 2026?
Is APIC a good Bootstrap 5 admin template for developers?
Can I use APIC as an admin dashboard template for SaaS and startups?
Is APIC a responsive admin dashboard template?
Installation & Setup
What do I need installed before I start?
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?
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?
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?
dist/; change src/ and build again. See Production Build.Customization
How do I change the brand colours?
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?
?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?
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?
src/, its script in src/assets/js/pages/ and its menu entries in the two partials.Components, Data & Charts
Which chart libraries are included?
Is the data real?
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?
Is APIC also an admin dashboard UI kit?
Is APIC a dark mode admin template with RTL support?
Licensing & Support
What do I get when I buy?
Can I use it in a commercial product?
Where can I get the admin panel template download?
What are good ThemeForest alternatives for admin templates?
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.