AdminLTE#
AdminLTE is a popular open-source admin dashboard template and control panel theme built on top of Bootstrap. It provides a collection of ready-to-use UI components and layouts specifically designed for building admin panels, dashboards, and other web applications requiring an administrative interface.
👉 New to App-Generator? SignIN with GitHub or Download a PRO Starter for only $19.99/mo
Key Features#
Responsive Design
Cross-browser compatibility
Built on Bootstrap 4/5
Modular architecture
SCSS/SASS support
RTL support
Dark/Light mode
Extensive UI components library
Technical Stack#
Frontend Framework: Bootstrap 4/5
jQuery (required)
Popper.js
Font Awesome (icons)
Chart.js (for charts)
DataTables (for enhanced tables)
Select2 (for enhanced dropdowns)
Various Bootstrap plugins
Directory Structure#
adminlte/
├── dist/ # Compiled files
│ ├── css/ # Compiled CSS
│ ├── js/ # Compiled JavaScript
│ └── img/ # Images
├── plugins/ # Third-party plugins
├── pages/ # Example pages
└── src/ # Source files
├── scss/ # SCSS source files
└── js/ # JavaScript source files
Layout Components#
Main Header (main-header): Top navigation bar
Main Sidebar (main-sidebar): Left navigation menu
Content Wrapper (content-wrapper): Main content area
Control Sidebar (control-sidebar): Right sidebar for settings
Footer (main-footer): Page footer
UI Components#
Cards#
<div class="card">
<div class="card-header">
<h3 class="card-title">Card Title</h3>
<div class="card-tools">
<!-- Card tools go here -->
</div>
</div>
<div class="card-body">
Content goes here
</div>
<div class="card-footer">
Footer content
</div>
</div>
Customization#
SCSS Variables: Key variables that can be customized
// Main colors
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
// Sidebar
$sidebar-dark-bg: #343a40;
$sidebar-dark-hover-bg: #2c3136;
$sidebar-width: 250px;
// Header
$main-header-height: 57px;
Layout Options#
Available layout classes for body tag:
layout-fixed: Fixed sidebar
layout-navbar-fixed: Fixed navbar
layout-footer-fixed: Fixed footer
sidebar-collapse: Collapsed sidebar
sidebar-mini: Mini sidebar mode
dark-mode: Enable dark mode
Links#
👉 New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
👉
Download
products and start fast a new project👉 Bootstrap your startUp, MVP or Legacy project with a custom development sprint