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 unlimited hobby and commercial products. For newcomers, Django is a Python Web framework built by experienced developers that encourages rapid development of modern web applications.

Thank you! Content provided by App Generator.

• Django Bootstrap 5 Volt - LIVE deployment
• Django Bootstrap 5 Volt - product page
• More Django Templates - a curated list

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 setup is complete.

• Getting Started with Python - a super simple tutorial
• Setup Windows for development
• Setup CentOS for development

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 to 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. Its name is not important, we can rename it without causing any damages to the project.
• manage.py: A command-line utility that lets you interact with this Django project:
  • create databases
  • create migrations (for database updates)
• 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. site1.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 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 project 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 guest users to authenticate and to pass the login we need to register a user first (there is no default user).

Let's compile the project! If something goes wrong, feel free to ask for assistance in the comments section.

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 the browser: http://127.0.0.1:8000/

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

Django Bootstrap 5 - User Profile

Django Bootstrap 5 - UI Alerts

Bootstrap 5

Bootstrap is the most popular CSS Framework that powers 18+ Million 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 - the official website and documentation
• Bootstrap 5 - what's new, a nice article
• Bootstrap 5 tutorial - Learn how to get started without jQuery

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

• Django Bootstrap 5 Volt - Sources - published on Github
• Django Bootstrap 5 PRO - more pages, components.

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.