CoolAdmin - Modern Bootstrap 5 Admin Dashboard Template

CoolAdmin is a modern, responsive, and feature-rich admin dashboard template built with Bootstrap 5.3.8 and vanilla JavaScript. Completely rewritten in 2025 for optimal performance, modern web standards, and future-proofing.

What's New in v2.2.0 (December 2025)

Latest Dependencies & Performance Improvements

• Bootstrap 5.3.8 - Latest stable framework with bug fixes and improvements
• Font Awesome 7.1.0 - Latest FA7 release with 4,500+ new icons
• Chart.js 4.5.1 - Latest patch with performance improvements
• Swiper.js 12.0.3 - Major upgrade with CSS-only theming and lighter bundle
• Perfect Scrollbar 1.5.6 - Enhanced scrollbar with passive touch events
• Complete Icon Migration - All icons updated to FA7 syntax for perfect display

Preview

Dashboard Variations

| Dashboard 1 | Dashboard 2 | Dashboard 3 | Dashboard 4 | |-------------|-------------|-------------|-------------| | | | | |

UI Components & Pages

• Interactive Charts - Line, Bar, Doughnut, and Real-time charts
• Data Tables - Responsive tables with horizontal scroll indicators
• Modern Forms - Bootstrap 5 native form components
• Advanced Calendar - FullCalendar v6+ integration
• UI Elements - Cards, Modals, Buttons, Alerts, Progress bars
• Mobile Optimized - Perfect experience on all devices

Key Features

Modern Architecture

• Bootstrap 5.3.8 with the latest utilities and components
• Vanilla JavaScript - No jQuery dependency for better performance
• ES6+ Code - Modern JavaScript patterns and best practices
• Modular Design - Easy to customize and extend
• SEO Optimized - Clean markup and semantic HTML5

Advanced Data Visualization

• Chart.js 4.5.1 - Latest version with enhanced performance
• 6 Pre-built Chart Types - Line, Bar, Doughnut, Area, and more
• Responsive Charts - Perfect display on all screen sizes
• Real-time Updates - Dynamic data visualization capabilities
• Modern Animations - Smooth transitions and interactions

Mobile-First Design

• Responsive Grid System - Bootstrap 5's improved grid
• Touch-Friendly Navigation - Optimized sidebar and menus
• Mobile Tables - Horizontal scroll with visual indicators
• Gesture Support - Swipe navigation for mobile devices
• Optimized Performance - Fast loading on mobile networks

Beautiful UI Components

• 24+ HTML Pages - Comprehensive dashboard layouts
• 50+ UI Elements - Cards, buttons, forms, tables, modals
• Modern Design System - Consistent colors, typography, and spacing
• Thin Custom Scrollbars - Subtle 8px scrollbars for better UX
• Clean Typography - Readable fonts and proper hierarchy

Go Pro — Premium Admin Templates

Want more layouts, richer components, and priority support? Our premium templates on DashboardPack are built for teams shipping real products.

<table> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/tailpanel.png" alt="TailPanel — React admin dashboard with Tailwind CSS styling" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>TailPanel</strong></a> <br> _{React + TypeScript + Tailwind CSS. 9 layouts, theme switching, Vite-powered.} </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/admindek.png" alt="Admindek — responsive admin panel with analytics dashboards" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Admindek</strong></a> <br> _{Bootstrap 5. 100+ UI elements, dark/light themes, RTL ready, 10 color schemes.} </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/adminty.png" alt="Adminty — comprehensive admin dashboard with 160+ pages" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Adminty</strong></a> <br> _{Bootstrap 5. 160+ pages covering every common admin use case out of the box.} </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/architectui.png" alt="ArchitectUI — professional admin UI with 250+ integrated components" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>ArchitectUI</strong></a> <br> _{Bootstrap 5. 250+ widgets, plug-and-play modular design, 9 dashboard variations.} </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/kero.png" alt="Kero — Webpack-powered admin template with dual layout options" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Kero</strong></a> <br> _{Bootstrap 5 + Webpack. Choose between horizontal or sidebar navigation, SASS themes.} </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/cryptocurrency.png" alt="Cryptocurrency Dashboard — crypto asset management admin panel" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Cryptocurrency Dashboard</strong></a> <br> _{Bootstrap. Designed for crypto exchanges, ICO dashboards, and portfolio tracking.} </td> </tr> </table> <p align="center"> <a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Explore the Full Collection</strong></a> </p>

Technical Specifications

Core Technologies

{
  "bootstrap": "5.3.8",
  "chart.js": "4.5.1",
  "fontawesome": "7.1.0",
  "swiper": "12.0.3",
  "javascript": "ES6+ Vanilla",
  "css": "CSS3 + Custom Properties",
  "html": "HTML5 Semantic Markup"
}

Browser Support

| Browser | Version | Status | |---------|---------|--------| | Chrome | 88+ | Fully Supported | | Firefox | 78+ | Fully Supported | | Safari | 14+ | Fully Supported | | Edge | 88+ | Fully Supported | | Mobile Safari | iOS 14+ | Fully Supported | | Chrome Mobile | Android 8+ | Fully Supported |

Performance Metrics

• Bundle Size: 2.4MB (25% reduction from v1.0)
• Load Time: ~30% faster than jQuery-based version
• Mobile Performance: Optimized for 3G/4G networks
• Dependencies: Only 8 core dependencies (reduced from 15+)

File Structure

CoolAdmin/
├── 📁 css/
│   ├── theme.css                  # Main stylesheet with Bootstrap 5 customizations
│   ├── font-face.css             # Custom font definitions
│   ├── aos.css                   # Animate On Scroll styles
│   └── swiper-bundle.min.css     # Modern slider/carousel styles
├── 📁 js/
│   ├── vanilla-utils.js          # 🆕 jQuery replacement utilities
│   ├── main-vanilla.js           # 🔄 Updated Chart.js v4 configurations
│   ├── bootstrap5-init.js        # Bootstrap 5 component initialization
│   ├── modern-plugins.js         # 🆕 Modern plugin configurations
│   ├── swiper-bundle.min.js      # Touch slider functionality
│   └── aos.js                    # Scroll animations
├── 📁 vendor/
│   ├── bootstrap-5.3.8.min.css  # Latest Bootstrap framework
│   ├── bootstrap-5.3.8.bundle.min.js
│   ├── fontawesome-7.1.0/       # Latest Font Awesome icons
│   ├── chartjs/chart.umd.js-4.5.1.min.js # Chart.js v4.5.1 UMD bundle
│   ├── perfect-scrollbar/        # Custom scrollbar functionality
│   ├── css-hamburgers/