Modern, Responsive Bootstrap Dashboard Template – Astero Admin

Preview:

Description:

Astero Admin is a free, open-source Bootstrap admin template that provides a set of pre-built components and a development workflow to help you build modern dashboards and admin panels from scratch.

Key Features:

• Built on the latest Bootstrap framework with a clean, professional UI design
• Complete responsiveness across all devices and screen sizes
• Integrated light and dark mode with one-click switching
• Advanced build system with parallel processing
• Modular architecture with well-organized SCSS and JS components
• Five authentication design systems
• RTL language support
• Over 3,000 icons
• Logical folder structure for efficient development

Installation

1. npm (My Preferred Method):

For most projects, I’d go with the npm route. It integrates best with modern build tools.

npm install asteroadmin

Then, import the necessary CSS and JavaScript into your project:

// Import CSS
import 'asteroadmin/dist/css/style.css'
// Import JavaScript (if needed)
import 'asteroadmin/dist/js/main.js'

2. CDN:

Quick and easy for testing or simple projects. Just add these to your HTML:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/asteroadmin@latest/dist/css/style.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/asteroadmin@latest/dist/js/main.min.js" type="module"></script>

You can also include specific files or versions, for example:

• CSS: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/style.min.css
• JavaScript: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/main.min.js

Keep in mind that using @latest might introduce breaking changes unexpectedly. For production, I’d strongly recommend specifying a version.

3. Cloning the Repository:

Clone the repo from GitHub:

git clone https://github.com/asterodigital/bootstrap-admin-template.git
cd bootstrap-admin-template
npm install

Start the development server:

npm run dev

This sets up the full development environment, running at http://localhost:1234.

Working with the Build System

# Start development with hot reloading
npm run dev
# Build for production
npm run build
# Compile SCSS to CSS
npm run css
# Bundle JavaScript files
npm run js
# Process static assets
npm run assets
# Check code quality
npm run lint
# Fix linting issues
npm run fixlint
# Format HTML files
npm run format:html
# Clean build artifacts
npm run clean
# Watch for file changes
npm run watch
# Serve built files locally
npm run serve

Changelog:

v1.0.5 (04/02/2025)

• Three major updates
• made theme consistent

v1.0.4 (03/28/2025)

• Enhance dropdown styles and added page loader for component preview
• refactor: Standardize string quotes and clean up DataTable initialization across multiple files
• feat: Implement clear all button functionality in search filters across multiple DataTable components
• fix: Remove border from alert components for improved styling consistency
• feat: Add live alert example with JavaScript interaction for dynamic user feedback
• fixed: css dev reload and lint changes
• add: added missing font in component preview & refactor: breadcrumb UI
• fix: Resolve template literal escaping in alerts.astro & feat(css): optimize CSS compilation and minification

v1.0.3 (03/23/2025)

• SCSS Import Organization and Cleanup
• Add autocomplete attributes for improved form accessibility + other changes
• Update Package Version to 1.0.3 with Asset Handling Improvements