This is Part 1 of Building a Dashboard with Django and Bootstrap:
- Part 1: Building a base Django project
- Part 2: Prepare for dynamic content
- Part 3: Handling navigation and the side menu
- Part 4: Deploy Django App to Azure
Inhaltsverzeichnis
Introduction
Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier.
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development
So, let’s get started.
Create project
For subsequent steps, we will remember our starting directory
DASHBOARD_ROOT=$(pwd) echo $DASHBOARD_ROOT ... here you will see your current folder...
First step is to create our main Django project
django-admin startproject dashboard cd dashboard python manage.py migrate python manage.py runserver 8080 python manage.py startapp app_base
View current project in browser

Create first apps
mkdir -p dashboard/apps/core python manage.py startapp Core dashboard/apps/core mkdir -p dashboard/apps/frontend python manage.py createapp Frontend dashboard/apps/frontend
Add new apps to project
Modify dashboard/settings.py
INSTALLED_APPS = [ ... 'dashboard.apps.core', 'dashboard.apps.frontend', ]
Modify dashboard/urls.py
from django.urls import path import dashboard.apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]
Create view
Modify view in apps/frontend/views.py
from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'
Create template for frontend View
Create template file dashboard/apps/frontend/templates/frontend/index.html
<h1> Let's get started </h1>
View current project in browser

Current folder Structure
So far, we have the following folder structure

Prepare for administrate your project
Create admin user
python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.
Add Bootstrap support
Download requires files for Bootstrap, jQuery ad PopperJS
mkdir -p install/bootstrap wget -q https://github.com/twbs/bootstrap/archive/v4.4.1.zip -O install/bootstrap/4.4.1.zip wget -q https://github.com/twbs/bootstrap/releases/download/v4.4.1/bootstrap-4.4.1-dist.zip -O install/bootstrap/4.4.1-dist.zip rm -rf dashboard/static/vendor/bootstrap/bootstrap-4.4.1-dist unzip -q install/bootstrap/4.4.1-dist.zip -d dashboard/static/vendor/bootstrap/ rm -rf dashboard/static/vendor/bootstrap/4.4.1 mv dashboard/static/vendor/bootstrap/bootstrap-4.4.1-dist dashboard/static/vendor/bootstrap/4.4.1
mkdir -p dashboard/static/vendor/jquery/3.4.1/js wget -q https://code.jquery.com/jquery-3.4.1.min.js -O dashboard/static/vendor/jquery/3.4.1/js/jquery.min.js wget -q https://code.jquery.com/jquery-3.4.1.slim.min.js -O dashboard/static/vendor/jquery/3.4.1/js/jquery.slim.min.js
make install-popperjs mkdir -p dashboard/static/vendor/popper/2.0.6/js wget -q https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js -O dashboard/static/vendor/popper/2.0.6/js/popper.min.js wget -q https://unpkg.com/@popperjs/core@2.0.6/dist/umd/popper.min.js.map -O dashboard/static/vendor/popper/2.0.6/js/popper.min.js.map
Create site templates in dashboard/templates/site
Add templates path to settings
File dashboard/settings.py
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR + '/dashboard/templates', ],
Add static path to settings
File dashboard/settings.py
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, APP_NAME + '/static') ]
Modify frontend view template
File dashboard/apps/frontend/templates/index.html
{% extends 'site/base.html' %} {% load static %} {% block title %}Dashboard with Django and Bootstrap{% endblock title %} {% block nav-style %}mkt-nav{% endblock nav-style %} {% block content %} <div class="jumbotron"> <div class="container"></div> FRONTEND <div class="container full"></div> </div> {% endblock content %}
View current status of project

Add dashboard from an existing template
For a first start, we will use this

Download required files
Bootstrap templates consist of at least 3 different types of files
- main index.html page, responsible for collection all elements and set up your page
- CSS files defining the style of your page
- JavaScript files, containing needed frameworks and code
So, first start by downloading the sample template from here. Be sure, you start in our project root folder:
cd $DASHBOARD_ROOT
git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2
Next, find out, what we need for our template in addition to the file index.html
cd install/sb-admin-2 grep -E "<(link|script)" index.html <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script>
That’s a lot of additional files.
To keep the file structure consistent, these files should be stored under the dash/board/static folder (same as the bootstrap files before).
To achieve this, there are
- Create desired folder and copy each of the source files to the destination folder
Copy the complete static folder from the github repository for this post.
We use the second option to keep the focus on creating our dashboard.
So, first, clone the repository:
cd $DASHBOARD_ROOT/install git clone https://github.com/rgoestenmeier/Dashboard_Django-Bootstrap
Then, copy the requred files
cd $DASHBOARD_ROOT cp -R install/Dashboard_Django-Bootstrap/dashboard/static dashboard
cp -R install/Dashboard_Django-Bootstrap/dashboard/templates dashboard
Having everything needed for the dashboard template, the next step is to modify the front-end template
File dashboard/apps/frontend/templates/frontend/index.html
{% extends 'site/sb-admin-2/base.html' %} {% load static %} {% block title %}Dashboard with Django and Bootstrap{% endblock title %} {% block content %} {% endblock content %}
View current project in browser

Perfect. We are done with the basic setup.
Still some work to do, because our dashboard is only a static dashboard. All content is programmed in the dashboard template file dashboard/templates/site/
For example, look at the cards with the earnings at the top:
![]() | ![]() |
![]() | ![]() |
To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.
This will be described in the next step: Part 2: Prepare for dynamic content