Bootstrap Python Flask - Volt Dashboard

This article presents an open-source seed project crafted with Bootstrap and Flask, a popular Python web framework. The product might be useful to bootstrap faster a new dashboard project using a nice combination of modern frameworks. Bootstrap is one of the most popular CSS Frameworks and Flask is a lightweight and beginner-friendly framework.  

• Flask Volt Dashboard - product page
• Flask Volt Dashboard - LIVE Demo

This modern design is provided by Themesberg using Bootstrap 5 and Vanilla JS without jQuery dependency or other hard dependencies.

Volt Dashboard - Official Product Information

Volt is a free and open-source Bootstrap 5 Dashboard Template featuring over 100 components, 11 pre-built pages, and 3 plugins with Vanilla JS.  This UI kit comes with 100+ handcrafted Bootstrap 5 components included some of them being buttons, alerts, modals, date pickers, widgets, and charts.

Volt Bootstrap 5 brings 11 example pages including an overview, sign in, sign up, transactions page, user profile with the possibility to add new ones with ease.

Volt Bootstrap 5 - UI Popups

The product uses the latest Bootstrap 5 stable version (at the moment this article is edited) installed via package.json and the UI can be customized via SASS files.

Flask Codebase

A few basic features are shipped with this starter: session-based authentication, modular codebase (blueprints), and deployment scripts for Docker and HEROKU. In order to compile the source code, we need to install a minimal programming kit:

• A modern editor - VSCode or Atom
• Nodejs - used in Javascript-based products and tools
• Yarn - a popular package manager for NodeJS (better than NPM)
• Python - a modern script language used for many types of projects
• GIT - a command-line tool used to download sources from Github
• Gulp - a toolkit to automate repetitive tasks

Once we have this minimal toolchain properly installed in the system we can download the sources from Github and start the project:

Step #1 - Download the sources using GIT

$ git clone https://github.com/app-generator/flask-dashboard-volt.git
$ cd flask-dashboard-volt

Step #2 - Install dependencies using a virtual environment

$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt

Step #3 - Set up the environment

$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"

Step #4 - Start the app

$ flask run
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

If all goes well, the app should be accessible in the browser. By default, the guest users are redirected to the login page and we need to provide a registered user in order to access the private pages: dashboard, user profile, UI components pages.

Thanks for reading! For more resource and support please access:

• More Flask Dashboards provided by AppSeed
• LIVE Support - for registered users
• Flask Volt PRO - Premium version of this product

Volt PRO is a premium Bootstrap 5 Admin Dashboard featuring over 800 components, 20 example pages, and 10 fully customized plugins written in Vanilla Javascript. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.