Django Bootstrap 4 - Integrate Template Example

Learn How to make Django Bootstrap 4 Template. Django Template System provides a way to separate Python Code and HTML Code. Django is a Popular Web Framework. It can be also used by front-end frameworks like AngularJS, ReactJS, VueJS. We can use Template Tags and Filters in HTML Code. It will allow us to use data in HTML.

In this Django bootstrap 4 tutorial, you will learn how to use HTML Template in Django. You will learn how to change your template path from settings. Here, you’ll also learn how to use static and media content in your template and how to integrate it. You will also learn how to organize your templates and optimally use them without repeating your code.

In this tutorial, we will use our own created Django Admin Bootstrap 4 template theme Example. You can download the template from here. For practice purposes, you can use it and you can also use different templates of your choice.

We are assuming that you have already started your Django project or doing changes in your existing projects. So let’s get started.

Change Django Template and Static Paths Directory

Instead of keeping all your template under the apps folder, I like to create a separate folder and keep all apps template in that.

Create a template folder named templates and a static folder named static at the level of the manage.py file.

Our project layout should look like this –

 .
 ├── django_shop (settings.py, urls.py, wsgi.py, ...)
 ├── manage.py
 ├── media
 ├── static
 └── templates

Now that we have created a template and static folder, we need to tell our Django project about that template path and where our static exists. So in your settings.py file add the path like this-

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR + '/templates/',], # <- here
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# Static files (CSS, JavaScript, Images) (You can find this at end of file)
# https://docs.djangoproject.com/en/2.2/howto/static-files/ 

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Note – In the template folder, we will keep all HTML files and in static folder CSS, JavaScript, Image. Follow our Django Best Practice: Configuring Settings File

Integrate Django Bootstrap4 Template

Download our Bootstrap 4 template from GitHub or clone it using bellow command –

git clone https://github.com/studygyaan/Bootstrap-Blog-Template.git

The template structure will look like this –

 template
    ├── index.html
    ├── css
        └── custom.css
    ├── js
        └── custom.js
    ├── img (images..)

Let’s separate our template content, by putting all css, js, image and static content in a static folder which we have created previously. All static content should be put in the static folder.

Your static folder will look like this –

static
  ├── css
      └── custom.css
  ├── js
      └── custom.js
  ├── img (images..)

Let’s move to our template folder. In your templates folder copy index.html and rename it to base.html.

For loading static content, we need to load it in our template. Edit your base.html and add the bellow code at the top above <!DOCTYPE html>.

{% load static %}

Now you have to use static {% static ' ' %} command for loading all images, js, and CSS from the static folder.

Suppose anything is loading from a static folder, for example, css/custom.css. You need to change href like this –

<link rel="stylesheet" href="css/custom.css">

<link rel="stylesheet" href="{% static 'css/custom.css' %}">

Similarly, you have to change for all tags (script, img, link) href which are loading stuff from the static folder.

<script src="{% static 'js/custom.js' %}"></script>
<img src="{% static 'img/Django-Post2.png' %}">
<link rel="icon" href="{% static 'img/favicon.ico' %}"/>
<link rel="stylesheet" href="{% static 'css/custom.css' %}">

Note – Content loading from CDN will be untouched.

Let’s use a simple TemplateView for loading the template. Edit your urls.py and add the path.

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='base.html')),
]

Your template will look like this –

How to Integrate Bootstrap 4 Template in Django

Django Bootstrap 4 Templates sExtending

You can also extend the template usingextends command. This will help your template to be DRY. Let’s take an example. Suppose you are extending blog.html with base.html.

<!-- base.html -->

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>Django Template</head>
  <body>
  {% block content %}  {% endblock content %} %}
  </body>
</html>

<!-- blog.html -->

{% extends 'base.html' %}
{% load static %}

{% block content %}
   <!-- Your HTML Code -->
   <h1>Blog</h1>
{% endblock content %}

# urls.py

path('', TemplateView.as_view(template_name='blog.html')),

GitHub – Run Example Locally

It is also available on GitHub – https://github.com/studygyaan/How-to-Integrate-Bootstrap-4-Template-in-Django

Clone the Repository –

git clone https://github.com/studygyaan/How-to-Integrate-Bootstrap-4-Template-in-Django.git

Change Directory

cd How-to-Integrate-Bootstrap-4-Template-in-Django

Create Virtual Environment – VirtualENV

virtualenv env

Activate Virtual Environment

source env/bin/activate

Run requirement.txt file to install libraries using Pip3

pip3 install -r requirements.txt

Run the server

python3 manage.py runserver

And open http://localhost:8000/ in your browser.

Django Bootstrap 4 – Integrate Template Example

Change Django Template and Static Paths Directory

Integrate Django Bootstrap4 Template

Django Bootstrap 4 Templates sExtending

GitHub – Run Example Locally