Django + Bootstrap: Basic setup

This is the English version of my second article here at dev.to.

The purpose is to create a basic setup of a Django project integrated with Bootstrap and Font Awesome, which can be the base of your projects. If you want to check out the whole code:

Create the Django project

First of all, we create the project root directory

~: $ mkdir project
~: $ cd project/

So, we set up a Python virtual environment called venv where we will install the dependencies of our project. We activate it and install Django. Code below.

~/project: $ python3 -m venv venv
~/project: $ source venv/bin/activate
(venv) ~/project: $ pip install Django

Django installed, the next step is to create a Django project. We create a src/ directory and run the django-project command inside it. We called the project core and the dot indicates we are building it in the current directory.

(venv) ~/project: $ mkdir src
(venv) ~/project: $ cd src/
(venv) ~/project/src: $ django-admin startproject core .

Now we create two more directories: static, where we will put the Bootstrap and Font Awesome files, and templates, where we will put our HTML template files.

(venv) ~/project/src: $ mkdir static templates

Ready to run the Django service. For that, we first apply the migrations (for the default applications Django comes with, like admin, auth, etc.), and so run the server.

(venv) ~/project/src: $ python manage.py migrate
(venv) ~/project/src: $ python manage.py runserver

If everything went well the service must be accessible at http://127.0.0.1:8000.

Bootstrap and Font-awesome integration

So, with the Django project built, we integrate Bootstrap and Font Awesome sources on it.

Bootstrap

In the Bootstrap Downloads page, we chose Compiled CSS and JS, ready-to-use compiled code. It's the first option on the web page.

We unzip the package and copy its two directories js and css to the directory /project/src/static/ in our project. Almost there, before leaving this step we remove all unnecessary files in the js and css folders. We only keep with bootstrap.min.js and bootstrap.min.js.map in the js, and with bootstrap.min.css and bootstrap.min.css.map in the css.

Font-awesome

With Django and Bootstrap integrated we already have a pretty good setup, but we can also integrate with Font Awesome as the icing on the cake.

In the Font Awesome official website, we download its Free Package on this link.

We create a fa subdirectory on our project /project/src/static/fa/ and so we unzip the Font Awesome package and copy the webfonts and css folders there. We also remove unnecessary files in /project/src/static/fa/css, keeping only the all.min.css.

Integrating everything

The final step is integrating everything.

We edit the /project/src/core/settings.py file, adding a line with a relative reference to the static directory.

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

In the same file, we also edit the section about TEMPLATES, specifically its DIR value to the following:

TEMPLATES = [
    {
     # -- some code up there --
        'DIRS': [os.path.join((BASE_DIR), 'templates/')],
     # -- some code down there

Views and URLs

Before creating templates, we do some logic stuff.

In Django, we map all the URLs our application serves in the urls.py file. So, we create an URL on the root that, when accessed, call a view, i.e. a function inside views.py, which is who will be handling the request and rendering the result page to the user.

urls.py file:

from django.contrib import admin
from django.urls import path
from .views import index


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
]

views.py file:

from django.shortcuts import render


def index(request):
    return render(request, 'index.html', {})

At this point, we only need an index.html template file.

Templates

The very final step, I swear, is creating the index.html file. We create it from the scratch at the templates directory, and we use Jinja template language.

At the beginning of the file, we load the static files.

{% load static %}

In the head HTML section we put the references to the CSS and JS files.

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>

Well done! We are ready to write HTML code using Bootstrap and Font Awesome as a visual pattern! In the GitHub repository of this project, we can see an index.html sample already using some Bootstrap components, which seems like this: