Modern, Responsive Bootstrap Dashboard Template – Astero Admin

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/asteroadmin@1.0.2/dist/css/style.min.css
• JavaScript: https://cdn.jsdelivr.net/npm/asteroadmin@1.0.2/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.9 (06/04/2025)

• scroll improvement

v1.0.7 (06/01/2025)

• New skin system implemented and fixed many bugs and minor improvements.

v1.0.6 (04/29/2025)

• style(component-preview): enhance layout and alignment of card and modal components
• Preview box improvements.

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

The post Modern, Responsive Bootstrap Dashboard Template – Astero Admin appeared first on CSS Script.