Django Bootstrap 5 - Volt Dashboard (Free Product)

Django Bootstrap 5 - Volt Dashboard (Free Product)

Hello Coders,

This article presents an open-source Django Bootstrap 5 starter crafted on op of Volt Dashboard template, a modern jQuery-free design. The product can be downloaded from Github and the permissive license allows the usage for hobby and commercial product for free.  For newcomers, Django is a Python Web framework built by experienced developers that encourages rapid development of modern web applications.

Thanks for reading! TL;DR;

Django Bootstrap 5 - Volt Dashboard.

What is Django

For newcomers, this section explains what is Django and the basic features offered by this popular Python-based web framework. To code a simple web app on top of Django, Python must be installed and accessible via the terminal. Just to be sure we have Python on our workstation, we can type "python --version" in a terminal window and check the output. Anything that's not an error, is a good thing.

$  python --version
Python 3.8.4 <--- All Good

If this command is not recognized by the operating system, Python should be downloaded and installed from the official website. To complete this phase, feel free to access below resources or just Google for more tutorials regarding Python installation and get back here once the set up is complete.

Install Django

To install Django, we can use PIP, the official Python package manager:

$ pip install Django

Django - A minimal application

Django comes with a powerful CLI (command line interface) to assist developers prototype a project skeleton with a single line:

$ django-admin startproject site1

This will create a site1 directory in your current directory.

The files created by startproject command:

site1/                  # The root directory (we can change the name)
    manage.py           # Django utility file
    site1/              # This is the actual Django project
        __init__.py     # 
        settings.py     # Store app settings
        urls.py         # Define app routes
        asgi.py         # Used in deployment 
        wsgi.py         # Used in deployment  

The meaning of each file:

  • The outer site1/ root directory is a container for your project.
  • manage.py: Basic script that lets you interact with this Django project
  • The inner site1/ directory is the actual Python package for your project. Its name is the Python package name you’ll need to use to import anything inside it (e.g. mysite.urls).
  • site1/__init__.py: An empty file that tells Python that this directory should be considered a Python package.
  • site1/settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.
  • site1/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site.
  • site1/asgi.py: An entry-point for ASGI-compatible web servers to serve your project.
  • site1/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project.

Once the project has been generated successfully, we can start with ease using the command:

$ python ./manage.py runserver
$ # App runs on http://localhost:8000

As we can see, getting started and coding a super simple app using Django is quite easy and fun. Our Django sample (Volt Dashboard) comes already with a basic set of features and scripts for a smooth integration and deployment.


Django Volt Bootstrap 5 - How to use it

The product can be downloaded and used directly from Github and the build instructions are provided in the README files, saved along with projects sources. To compile it, we need to follow this simple set up:

  • Download the sources - using GIT, the popular versioning command tool
  • Install the dependencies - specified in the requirements file
  • Set up the environment - create database/tables
  • Start the application and visit the browser to see it in action  

By default the project redirects guests users to authenticate and to pass the login we need to register an user first (there is no default user).

Django Bootstrap 5 - Login Page.

Let's compile the project! If something goes wrong, feel free to access AppSeed and ask for support.

1# - Clone the sources (from Github)

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-volt.git
$ cd django-dashboard-volt

2# - Install modules/dependencies

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt

3# - Set up environment & create tables

$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate

4# - Start the application (development mode)

$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/

The private pages unlocked by our Django starter are simple with a distinct design:

Django Bootstrap 5 - Charts.

Django Bootstrap 5 - User Profile
Django Bootstrap 5 - User Profile.

Django Bootstrap 5 - UI Alerts
Django Bootstrap 5 - UI Alerts.

Bootstrap 5

Bootstrap is the most popular CSS Framework that powers 18+ Millions websites across the globe. As stands on the HOMEpage, Bootstrap can be used to quickly design and customize responsive mobile-first sites via Sass variables and mixins, responsive grid system, extensive prebuilt components, and JavaScript plugins.  

What's new in Bootstrap 5 - Removing jQuery (probably the most important update), Dropping support for IE 10 & 11, Custom SVG icon library, Switching to Hugo from Jekyll, a Ruby-based SSG.

To Read more about Bootstrap 5, feel free to access:

Bootstrap 5 - Open-Source CSS Framework.


Thanks for reading! For more related content or support, please access:

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

800+ Components - There are more than 800 premium Bootstrap 5 components included with the admin dashboard, some of which are buttons, forms, alerts, datepickers, range sliders and many more.

21 Example Pages - Volt Pro comes with 20 example pages including the overview page, kanban drag and drop page, messages, user settings, transactions, calendar, sign in, sign up, and many more pages.

Django Bootstrap 5 - Volt Dashboard PRO.
Show Comments