Kiaalap - Free Bootstrap 5 Education Admin Dashboard Template

Kiaalap Dashboard

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.

🎨 Demo

Check out the live demo: Kiaalap Live Preview

✨ Features

Modern Technology Stack

Bootstrap 5.3.8 - Latest Bootstrap version with 100% jQuery-free architecture
Vite 7.3 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

Comprehensive Education Management

📊 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

65+ Ready-to-Use Pages

Dashboards & Analytics

Main Dashboard (3 variants)
Analytics Dashboard
Widget Collections

Academic Pages

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

UI Components

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

Additional Features

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

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn

Installation

Clone the repository

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

Install dependencies

npm install

Start development server

npm run dev

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

Build for production

npm run build

Production files will be generated in the dist/ directory

📦 Available Scripts

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

🏗️ Project Structure

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

🎯 Key Features Explained

100% Modern Architecture

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

Handlebars Templating System

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.

Local Asset Management

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

Custom Grid System

Bootstrap 5 grid enhanced with custom dashboard-grid classes:

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

Responsive & Accessible

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

🛠️ Customization

Changing Colors

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

Adding New Pages

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

Modifying Navigation

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

📊 Built With

Core Technologies

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

Key Libraries

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

🌐 Browser Support

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

📝 Version History

v2.3.0 (2026) - Dependency updates, fixed dashboard screenshot, ESLint v10 flat config migration
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.

📄 License

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.

🤝 Contributing

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

💪 Support

If you find this template useful, please consider:

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

🏆 Credits

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

About Colorlib

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.

About DashboardPack

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.

📚 Helpful Resources from Colorlib

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

Admin Dashboard Collections

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

Kiaalap

Install / Use

README