Bootstrap Dashboard Kit is a free, open-source starter kit for building dashboards and web applications on Bootstrap 5, using the Eleventy static site generator and the Webpixels CSS design system.
What is Bootstrap Dashboard Kit?
Bootstrap Dashboard Kit is a free and minimal starter kit for building dashboards and web applications on Bootstrap 5. It combines the Eleventy static site generator, Bootstrap 5 source files installed via npm, and the Webpixels CSS design system to produce static HTML, CSS, and JS output. The project is developed and maintained by Webpixels and is open-sourced under the MIT license.
The kit takes Sass and JavaScript source files as input and compiles them into minified, autoprefixed assets, while Eleventy handles layout and page generation. It includes an example stylesheet (scss/main.scss) and an example JavaScript file (js/main.js) that demonstrates how to import all Bootstrap components.
Key Features
- Eleventy static site generator — Builds the layouts and pages as static HTML, giving you a fast, dependency-light output.
- Bootstrap 5 via npm — Includes Bootstrap source files so you can compile and customize them instead of loading a prebuilt CDN.
- Webpixels CSS design system — A component-centric utility framework based on Bootstrap 5, offering extended utility classes generated with the Bootstrap API.
- Sass compilation and autoprefixing — npm scripts compile and prefix your Sass, compile JavaScript, watch for changes, and start a local server.
- HTML, CSS, and JS minification — Production builds are minified for smaller file sizes.
- No custom CSS code — Styling is done through utility classes to avoid duplicate CSS and keep code clean, as shown in the included card example.
- Fully customizable via Sass variables — Components are responsive and can be rebranded by overriding Sass variables, per the Webpixels theming docs.
Who should use Bootstrap Dashboard Kit?
- Front-end developers who want a modern, utility-first foundation for a dashboard project without writing custom CSS.
- Startups and product teams building an internal admin panel or SaaS dashboard, who need a fast static site generator and a clean Bootstrap base.
- Design system managers looking to extend Bootstrap with a component library like Webpixels CSS and need a working reference implementation.
What can you do with Bootstrap Dashboard Kit?
- Build a dashboard prototype: Use the included card and utility examples to assemble layout components and validate UI ideas quickly.
- Ship a static admin site: Run the production build to generate minified HTML/CSS/JS that can be deployed to any static host, including Netlify via the included deploy button.
- Create a branded theme: Override Sass variables from the Webpixels theme docs to change colors, fonts, and component styles across the whole kit.
How does Bootstrap Dashboard Kit work?
After cloning the repository, run npm install to install dependencies. Then use npm start to launch a local server with file watching for development, and npm run build to create a production-ready static build. Parcel is used for asset management, and all npm scripts are listed in package.json.
Pricing
The Bootstrap Dashboard Kit is free to use under the MIT license. Webpixels also offers a commercial upgrade called Clever Admin Dashboard, which adds 500+ ready-to-use UI components, 33+ pre-built pages and layouts, complete authentication flows (login, sign up, forgot password, profile), built-in Project Management and Kanban apps, and Apex Charts-based charts. Pro access to all Webpixels components and templates is sold separately.
FAQ
Is Bootstrap Dashboard Kit free?
Yes, the dashboard kit is free and open source under the MIT license. You can use it for personal and commercial projects without paying a license fee. The premium Clever Admin Dashboard and Pro access are separate paid products.
What static site generator does the kit use?
It uses Eleventy (11ty) to generate the layouts and pages. Eleventy provides a simple, fast static site build process, and you can find more commands in the Eleventy command line usage documentation.
Does the kit include authentication or app pages?
The free kit only includes basic example stylesheet and JavaScript files. Authentication flows, Project Management, Kanban, and 33+ pre-built pages are only available in the paid Clever Admin Dashboard version.
What styling system is used?
The kit is built on Bootstrap 5 and uses the Webpixels CSS design system, which provides utility classes and components. You can customize everything through Sass variables and generate your own branded theme.
