Django + Bootstrap: Basic setup
Tags: python, django, tutorial, beginners
Published: 2020-07-15 13:06:08

This is the English version of my second [article](https://dev.to/thalesbruno/django-projeto-generico-com-bootstrap-3d86) 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:

{% github thalesbruno/django_bootstrap no-readme %}

## Create the Django project

First of all, we create the project root directory

```bash
~: $ mkdir project
~: $ cd project/
```
So, we set up a Python [virtual environment](https://realpython.com/python-virtual-environments-a-primer/) called `venv` where we will install the dependencies of our project. We activate it and install Django. Code below.

```bash
~/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.

```bash
(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.

```bash
(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.

```bash
(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](https://getbootstrap.com/docs/4.3/getting-started/download/) 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](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself).

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.

```python
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:

```python
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:

```python
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:

```python
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](https://jinja.palletsprojects.com/en/2.10.x/) 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.

```html
<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:

![Django and Bootstrap generic page](https://thepracticaldev.s3.amazonaws.com/i/fuo71kza50tuce68nhnv.png)