Kiaalap is a free, open-source Bootstrap 5 admin dashboard template designed specifically for educational institutions. Built with modern web technologies and featuring 65+ ready-to-use pages, it provides everything needed to create a comprehensive education management system.

Check out the live demo: Kiaalap Live Preview

• Bootstrap 5.3.8 - Latest Bootstrap version with 100% jQuery-free architecture
• Vite 7.2 Build System - Lightning-fast development server and optimized production builds
• Handlebars Templating - Modular partials for maintainable code structure
• Chart.js 4.5 - Beautiful, responsive charts replacing legacy Morris/C3/D3 libraries
• Simple-DataTables 10.2 - Vanilla JavaScript data tables with no jQuery dependency
• Bootstrap Icons 1.13.1 - 2,000+ icons loaded locally (no CDN dependencies)
• Vanilla JavaScript - Clean ES6+ code throughout the application

• 📊 Multiple Dashboard Layouts - 3 unique dashboard designs for different use cases
• 👥 Student Management - Complete student profiles, enrollment, and academic tracking
• 👨‍🏫 Professor Management - Faculty profiles, course assignments, and schedules
• 📚 Course Management - Course creation, scheduling, and curriculum management
• 📖 Library System - Digital library asset management and tracking
• 🏢 Department Organization - Department structure and administration
• 📧 Communication Tools - Built-in messaging and notification system
• 📅 Event Calendar - Academic calendar and event management
• 💰 Fee Management - Student fees, payments, and financial tracking

• Main Dashboard (3 variants)
• Analytics Dashboard
• Widget Collections

• All Students / Student Profile / Add Student
• All Professors / Professor Profile / Add Professor
• All Courses / Course Info / Add Course
• All Departments / Department Details / Add Department
• Library Assets Management

• Buttons, Alerts, Modals
• Tabs & Accordions
• Forms (Basic & Advanced)
• Tables (Static & Dynamic with DataTables)
• Charts (Bar, Line, Area, Pie, Sparklines)

• Authentication Pages (Login, Register, Lock Screen, Password Recovery)
• Error Pages (404, 500)
• Email/Mailbox System
• Maps Integration
• Invoice Templates
• Profile Pages

• Node.js 18+
• npm or yarn

1. Clone the repository

git clone https://github.com/puikinsh/kiaalap.git
cd kiaalap

2. Install dependencies

npm install

3. Start development server

npm run dev

The dashboard will open automatically at http://localhost:3000

4. Build for production

npm run build

Production files will be generated in the dist/ directory

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint:html    # Validate HTML files
npm run lint:css     # Lint SCSS files
npm run lint:js      # Lint JavaScript files
npm run format       # Format code with Prettier
npm run clean        # Clean build directory

kiaalap/
├── src/
│   ├── css/              # Custom stylesheets
│   ├── js/               # JavaScript modules
│   ├── partials/         # Handlebars partials (header, sidebar, footer)
│   ├── helpers/          # Handlebars helpers
│   └── scss/             # Sass source files
├── node_modules/         # Dependencies (all assets load locally)
├── *.html               # 65 HTML pages
├── vite.config.js       # Vite configuration
└── package.json         # Project dependencies

Completely rewritten from legacy Bootstrap 3/4 template to modern Bootstrap 5 with:

• Zero jQuery dependencies (except Simple-DataTables)
• All assets from node_modules (no CDN dependencies)
• ES6+ JavaScript modules with tree-shaking
• Vite hot module replacement for instant updates
• Production builds optimized with Terser minification

All 65 pages use a consistent template structure with reusable partials:

• {{> head}} - Centralized meta tags, CSS imports from node_modules
• {{> sidebar}} - Navigation with automatic active state management
• {{> header}} - Top header with user menu and notifications
• {{> footer}} - Footer with current year and copyright
• {{> scripts}} - JavaScript module imports from node_modules

Page-specific context managed in vite.config.js for dynamic navigation states, titles, and breadcrumbs.

All assets served from node_modules for:

• Better Performance - No external network requests
• Reliability - Works offline, no CDN downtime
• Version Control - Lock specific versions via package.json
• Bundle Optimization - Tree-shaking and code splitting

Bootstrap 5 grid enhanced with custom dashboard-grid classes:

.dashboard-grid.grid-cols-4  /* 4 columns → 1 on mobile */
.dashboard-row               /* 24px bottom margin */

• Mobile-first responsive design
• ARIA labels and semantic HTML
• Keyboard navigation support
• Screen reader friendly

Edit the Sass variables in src/scss/_variables.scss to customize the color scheme.

1. Create new HTML file using the Handlebars template structure
2. Add page context in vite.config.js if needed
3. Include custom CSS/JS as required

Edit src/partials/sidebar.hbs to customize the navigation menu structure.

• Bootstrap 5.3.8 - Modern CSS framework
• Vite 7.2 - Next generation build tool
• Chart.js 4.5 - Flexible JavaScript charting
• Handlebars 2.0 - Semantic templating

• Simple-DataTables 10.2 - Vanilla JS data tables
• Bootstrap Icons 1.13.1 - 2,000+ icon library
• Quill 2.0.3 - Modern rich text editor
• FullCalendar 6.1 - Event calendar
• Leaflet 1.9 - Interactive maps
• Tom Select 2.3 - Modern select library
• Cropper.js 1.6 - Image cropping
• CountUp.js 2.8 - Number animations

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

• v2.2.0 (2025) - All dependencies updated to latest versions, improved documentation
• v2.1.0 (2025) - Mailbox system improvements, legacy asset cleanup, enhanced card styling
• v2.0.0 (2025) - Complete modernization: Bootstrap 5, Vite build system, jQuery elimination
• v1.0.0 (2018) - Original release with Bootstrap 3/4

See CHANGELOG.md for detailed version history.

Kiaalap is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

If you find this template useful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 📢 Spreading the word
• 🤝 Contributing to the project

• Created by Colorlib
• Distributed by DashboardPack.com
• Original design and development by Aigars Silkalns

Colorlib is the #1 source for free & premium Bootstrap templates, WordPress themes, and UI kits. We create beautiful, easy-to-use templates and themes that help developers and designers build amazing websites.

• Website: https://colorlib.com/
• GitHub: https://github.com/ColorlibHQ
• Twitter: @colorlib

DashboardPack.com is a marketplace for premium and free admin dashboard templates. We curate and distribute high-quality dashboard templates for various frameworks and use cases.

Looking for more templates or web development resources? Check out these curated collections and articles from Colorlib:

• Best Free Bootstrap Admin Dashboard Templates - Top free admin templates
• Bootstrap Dashboard Templates - Comprehensive list of dashboard templates
• Free HTML5 Admin Dashboard Templates - HTML5-based admin panels
• Angular Dashboard Templates - For Angular developers
• React Dashboard Templates - React-based admin panels
• Vue Dashboard Templates - Vue.js admin templates

• Bootstrap 5 Templates - Latest Bootstrap 5 themes
• Free Bootstrap Templates - Comprehensive collection of free themes
• Bootstrap Portfolio Templates - Portfolio and personal websites
• Bootstrap Business Templates - Business and corporate themes

• CSS Templates - Pure CSS website templates
• HTML Website Templates - HTML5 website designs
• JavaScript Templates - JS-powered templates
• WordPress Themes - Free WordPress themes

• Adminator - Responsive Admin Dashboard Template
• AdminLTE - Best open source admin dashboard & control panel theme
• Gentelella - Free Bootstrap 5 Admin Dashboard Template
• Notika - Bootstrap 5 Admin Template
• Nalika - Bootstrap 5 Admin Template
• Concept - Bootstrap 5 Admin Dashboard

• Web Design Blog - Latest trends and tutorials in web design
• Bootstrap Tutorials - Learn Bootstrap development
• Template Customization Guides - How-to guides for template customization

Join the Colorlib Community:

• 💬 Support Forum - Get help from the community
• 🐦 Twitter - Follow for daily web design inspiration
• 📘 Facebook - Join our Facebook community
• 📺 YouTube - Video tutorials and showcases

Built with ❤️ by Colorlib and distributed by DashboardPack