Select your Setup Preferences


The following guidelines are for people experienced in django or have already used this package once and looking for customizing the setup for different project environment. If you are using it for the first time we recommend to visit our Quick Walkthrough Tutorial for detailed instructions.

Bootstrap Version

Integrate Bootstrap assets

Integrate jQuery

Master Layout

Let's Set it Up

Install PyPI packages via pip:

pip install django-bootstrap4
pip install django-bootstrap-datepicker-plus

Add packages to INSTALLED_APPS:

  # Add the following
I need more information

How to add packages to INSTALLED_APPS

INSTALLED_APPS is the list of all installed apps registered to your django project in your file. You can see some default apps already registered by django. Add the above packages at the end of the list.

Add the following code block in head of your template.

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{{ }}
Add the following code block in the head of your page template.
{% block extrahead %}
{{ }}
{% endblock %}
What these tags do?

Role of these tags

  • load bootstrap3 => imports bootstrap4 library tags to template
  • bootstrap_css => Add Bootstrap CSS file to the template
  • bootstrap_javascript jquery='full' => Add Bootstrap JavaScript+jQuery
  • => Adds date-picker required JS and CSS files
  • extrahead => Slot for extra resources to be added by child template

Final Result:

The master template (master.html)
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{% block extrahead %}
{% endblock %}

<div class="container">
    {% block content %}
    {% endblock %}
The page template (create-event.html)
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ }}

<form method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Save">


You choose to include jQuery yourself. Make sure jQuery is loaded before Boostrap JavaScript, otherwise you will run into a fatal error


The tag is only for Generic Views. If you are generating the view yourself passing the form object to render function, you have to use In case of the following example instead of {{ }} used in above code block, you have to use {{ }}.

# File:
from django.shortcuts import render
from .forms import UserForm

def create_user(request):
  user_form = UserForm()
  return render(request, 'my_template.html', {'my_form': user_form})

What is

The tag adds all JS/CSS files needed by all widgets present in the form into your template. Without this the date-picker calendar won't show up. You cannot add it to your master template. Unless all of your pages has a form it will through an Undefined Variable exception.

Further Resources