Pavo Admin Dashboard

Project Overview

Pavo Admin Dashboard - A modern, fully responsive Bootstrap 5 admin template designed for all devices including desktop, laptop, tablet, mobile phone, and 4K TV displays.

Pavo Admin Dashboard is a comprehensive, enterprise-grade admin panel template built with Bootstrap 5. It includes responsive layouts, modern UI components, and extensive configuration options.

Version Information

Version: 1.0.0
Framework: Bootstrap 5.3+
License: MIT
Author: Saleem Raza
Website: refinethemes.com

Key Specifications

Responsive: ✓ All Devices
Dark Mode: ✓ Built-in
RTL Support: ✓ Yes
Cross-Browser: ✓ Compatible
Performance: ✓ Optimized

Installation Guide

Step 1: Extract Files

Extract the downloaded ZIP file to your desired location on your web server or local machine.

unzip pavo-admin-dashboard.zip
cd pavo-admin-dashboard

Step 2: Directory Structure

The project follows this directory structure:

pavo-admin-dashboard/
├── index.html              (Main Dashboard)
├── helper.html             (This File - Setup Guide)
├── assets/
│   ├── css/                (Custom Stylesheets)
│   ├── js/                 (JavaScript Files)
│   ├── img/                (Images & Icons)
│   └── plugins/            (Third-party Libraries)
├── README.md               (Documentation)
└── LICENSE.txt             (License Information)

Step 3: Web Server Setup

No backend setup required! Simply serve the files with any web server:

# Using Python
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

# Using Apache/Nginx
# Copy files to web root and access via browser

Step 4: Open in Browser

Navigate to your local server in a web browser:

http://localhost:8000/index.html

Configuration & Customization

1. Basic Configuration

Edit the following files to customize your dashboard:

<!-- Main HTML -->
<meta name="author" content="Your Name">
<meta name="description" content="Your Description">
<title>Your Dashboard Title</title>

2. Color Themes

The dashboard includes multiple color schemes. Access theme switcher via settings button (bottom-right):

Dark Theme

Professional dark color scheme for reduced eye strain

Light Theme

Clean, bright interface for daytime use

Custom Colors

Choose from 12+ color variations

3. Sidebar Configuration

Customize sidebar behavior using settings menu:

Flat Layout: Simplified menu structure
RTL Layout: Right-to-left language support
Sticky Sidebar: Keep sidebar visible while scrolling
Push Sidebar: Push content when sidebar expands

4. Custom CSS

Add custom styles to ./assets/css/style.css:

/* Custom Variables */
:root {
  --primary-color: #6366f1;
  --secondary-color: #8b5cf6;
  --success-color: #10b981;
}

/* Your Custom Styles */
.my-component {
  color: var(--primary-color);
}

Responsive Design

Pavo Admin Dashboard is fully responsive and optimized for all screen sizes and devices.

Bootstrap Breakpoints

xs (Extra Small): 0px - 575px | Mobile Phones

sm (Small): 576px - 767px | Tablets (Portrait)

md (Medium): 768px - 991px | Tablets (Landscape)

lg (Large): 992px - 1199px | Laptops

xl (Extra Large): 1200px - 1399px | Desktops

xxl (XXL): 1400px+ | Large Screens & 4K TV

Mobile-First Approach

The dashboard uses a mobile-first responsive design strategy:

Base styles target mobile devices
Media queries enhance for larger screens
Flexible grid system adapts to any viewport
Touch-friendly interface for mobile users

Viewport Meta Tag

<meta name="viewport" 
      content="width=device-width, 
               initial-scale=1, 
               maximum-scale=5, 
               user-scalable=yes">

Key Features

Fully Responsive

Optimized for mobile, tablet, laptop, and 4K displays

Dark Mode

Built-in dark theme support with automatic detection

RTL Support

Right-to-left language support for Arabic, Hebrew, etc.

12+ Themes

Multiple color schemes and design variations

Fast Performance

Optimized assets and lazy loading support

Clean Code

Well-structured, commented, and easy to customize

Components

50+ pre-built components and UI elements

Bootstrap 5

Built on the latest Bootstrap framework

Device Support & Testing

Pavo Admin Dashboard has been tested and optimized for the following devices and screen sizes:

Mobile Phone

320px - 480px

Tablet

768px - 1024px

Laptop

1366px - 1920px

Desktop

1920px - 2560px

4K TV

3840px - 4160px

Ultra-Wide

2560px+

Tested Browsers

Chrome: ✓ Latest Versions
Firefox: ✓ Latest Versions
Safari: ✓ Latest Versions
Edge: ✓ Latest Versions

Mobile Chrome: ✓ Android 5+
Mobile Safari: ✓ iOS 12+
Opera: ✓ Latest
Samsung Browser: ✓ Latest

Complete Project Structure

pavo-admin-dashboard/
│
├── index.html                    # Main Dashboard Page
├── helper.html                   # Setup & Configuration
├── analytics.html                # Analytics Dashboard
├── profile.html                  # User Profile Page
├── settings.html                 # Settings Page
├── login.html                    # Login Page
│
├── assets/
│   ├── css/
│   │   ├── style.css             # Main Styles
│   │   ├── mega-menu-responsive.css
│   │   ├── smooth-animations.css
│   │   └── theme-colors.css
│   ├── js/
│   │   ├── pavo-main.js          # Main Scripts
│   │   ├── dashboard.js          # Dashboard Functions
│   │   ├── theme-switcher.js
│   │   └── responsive.js
│   ├── img/
│   │   ├── pavo-logo.png
│   │   └── employees/
│   └── plugins/
│       ├── bootstrap/            # Bootstrap 5
│       ├── bootstrap-icons/
│       ├── font-awesome/
│       ├── jquery-3-7-1/
│       ├── feather-icons/
│       ├── metismenu-3.0.5/
│       ├── animate-css/
│       ├── daterangepicker/
│       ├── pace-js/
│       └── switchery/
│
├── README.md                     # Full Documentation
└── LICENSE.txt                   # License

Customization Guide

1. Change Logo & Branding

<!-- Replace in index.html, helper.html, etc. -->
<img class="img-fluid logo" 
     src="./assets/img/YOUR-LOGO.png" 
     alt="your logo">

2. Customize Colors

Edit CSS variables in ./assets/css/style.css:

:root {
  --primary-color: #6366f1;
  --secondary-color: #8b5cf6;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
}

3. Add Custom Pages

Create new HTML files and copy the sidebar and header structure from existing pages.

John Smith

Navigation

Installation & Configuration

Quick Navigation