In this tutorial we’ll create a typical Django 5 app and then we’ll add Bootstrap CSS framework manually for offline usage. For this tutorial you need to have Python 3 installed along with venv package. Command line instructions given here will work on any Linux, macOS or WSL in Windows. So, let’s get going…
First create a new folder:
mkdir myappGo inside this newly created folder:
cd myapp(Note: From now on wards all the commands entered in this tutorial are from root position of this myapp folder.)
Create virtual environment:
python3 -m venv .envMount virtual environment:
source .env/bin/activateInstall Django 5
pip install django==5The above command will install Django 5. Now create a project by entering following command (don’t forget the full-stop at the end):
django-admin startproject project .Then create an app named ‘base’:
python manage.py startapp baseAmend project/settings.py as follows in order to add base app into project:
INSTALLED_APPS = [
"base",
# ...
]Create a folder for templates inside base app:
mkdir base/templates/base -pCreate a template file base.html inside base/templates/base folder by executing:
touch base/templates/base/base.htmlAnd then insert following into this base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{% block title %}MyApp{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'base/css/bootstrap.min.css' %}" rel="stylesheet">
{% block extra_head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'base' %}">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'base' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'base' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'base' %}">Contact</a>
</li>
{% block menu_items %}{% endblock %}
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="{% static 'base/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>Change project/urls.py as follows:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("", include('base.urls')),
]
Then create base/urls.py by executing:
touch base/urls.pyAnd then change base/urls.py as follows:
from django.urls import path,include
from . import views
urlpatterns = [
path('base', views.base, name='base'),
]Now amend base/views.py as follows:
from django.shortcuts import render
def base(request):
return render(request, 'base/base.html')Populate database with migrations, if not already done:
python manage.py migrateDownload Bootstrap and extract the zip file. At the time of writing the latest is:
https://github.com/twbs/bootstrap/releases/download/v5.3.8/bootstrap-5.3.8-dist.zip
Then create static/base/css and static/base/js folders inside base app, by executing this command:
mkdir base/static/base/css base/static/base/js -pAnd then copy a couple of extracted Bootstrap files: copy bootstrap.min.css from css folder into base/static/base/css folder. Similarly, copy bootstrap.bundle.min.js from js folder into base/static/base/js folder.
Run dev server:
python manage.py runserverHead to:
http://localhost:8000/base