⚡️Volt - Open Source Bootstrap 5 Admin Dashboard (Vanilla JS)
Tags: showdev, opensource, bootstrap5, javascript
Published: 2020-08-23 20:47:11

Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS.

## Bootstrap 5 and Vanilla Javascript

Volt is built using the latest version of Bootstrap 5 and because [jQuery is no longer required as a dependency](https://themesberg.com/blog/tutorial/bootstrap-5-tutorial), Volt has been built using only Vanilla JS.

## 100+ Components

There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on. Check out the [components on the official documentation](https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/alerts/).

## 11 Example Pages

Volt brings 11 example pages including an overview, sign in, sign up, transactions page and many more.

## 3 Lightweight Plugins

There are 3 lightweight and Vanilla JS plugins that come with Volt, namely a date picker, notification and charts library.

## Advanced development flow

By downloading you will get an advanced development workflow package including Sass files and a Gulp commands file that will let you build minified and un-minified project files with the ability to even add certain blocks of code based on your environment.

## Well documented
Volt is a thoroughly documented dashboard which covers everything from getting started to having all of the components and plugins well described. Check out our [quick start guide](https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/).

## Open source project

Volt is a free and open source project under the MIT License so if you appreciate this project you can give the [public Github repository](https://github.com/themesberg/volt-bootstrap-5-dashboard) a star and spread the open source love ❤️.

## Quick start

1. Download from [Themesberg](https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard) or clone this repository
2. Download the project's zip
3. Make sure you have Node locally installed.
4. Download Gulp Command Line Interface to be able to use gulp in your Terminal.

```
npm install gulp-cli -g
```

5. After installing Gulp, run npm install in the main `volt/` folder to download all the project dependencies. You'll find them in the `node_modules/` folder.

```
npm install
```

6. Run gulp in the `volt/` folder to serve the project files using BrowserSync. Running gulp will compile the theme and open `/index.html` in your main browser.

```
gulp
```

While the gulp command is running, files in the `assets/scss/`, `assets/js/` and `components/` folders will be monitored for changes. Files from the `assets/scss/` folder will generate injected CSS.

Hit `CTRL+C` to terminate the gulp command. This will stop the local server from running.

## Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

```
gulp build:dev
```

This will generate a folder `html&css` which will have unminified CSS, Html and Javascript.

## Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

```
gulp build:dist
```

This will generate a folder `dist` which will have minified CSS, Html and Javascript.

## Documentation

The documentation for Volt is hosted on our [website](https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/).

## File Structure

Within the download you'll find the following directories and files:

```
Volt Bootstrap 5 Admin Dashboard
.
├── README.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── img
    │   └── js
    ├── index.html
    ├── pages
    │   ├── components
    │   ├── dashboard
    │   ├── examples
    │   ├── settings.html
    │   ├── tables
    │   └── transactions.html
    ├── partials
    │   ├── _analytics.html
    │   ├── _footer.html
    │   ├── _head.html
    │   ├── _navigation.html
    │   ├── _pages-preview.html
    │   ├── _preloader.html
    │   ├── _scripts.html
    │   └── dashboard
    └── scss
        ├── volt
        └── volt.scss
```

## Upgrade to Pro

There is also a pro version of Volt which has more than 800 components, 20 example pages, and over 10 advanced plugins that can take your admin dashboard application to the next level. Check out [Volt Pro Premium Bootstrap 5 Admin Dashboard](https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard).