Select your Setup Preferences

Important!!!

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:

INSTALLED_APPS = [
  # Add the following
  "bootstrap4",
  "bootstrap_datepicker_plus",
]
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 settings.py 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' %}

{{ form.media }}
Add the following code block in the head of your page template.
{% block extrahead %}
{{ form.media }}
{% 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
  • form.media => 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 %}
</div>
The page template (create-event.html)
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}

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

Caution

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

About form.media

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

# File: views.py
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 form.media?

The form.media 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