Web Project Using Django: Template With Bootstrap

Posted on | In

Bootstrap3 for Django

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.

On github, there is a package that design for django developers to use bootstrap3 conveniently, its name is django-bootstrap3.

This package requires python 2.7 or above and django 1.8 or above, you can get its beta version by clone its github repo: django-bootstrap3, or get stable version by pip:

1
pip install django-bootstrap3

Use django-bootstrap3 in your Django Project

  1. The first thing you should do is to tell your project the package’s name and existence: adding bootstrap3 to INSTALLED_APPS in your settings.py.

  2. In your templates, use django rule to ‘import’ this library:

    1
    {% load bootstrap3 %}

    After that you can use bootstrap3 tags formatted as bootstrap_*, there is a small example from its github README.rst:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% load bootstrap3 %}
    {# Display a form #}
    <form action="/url/to/submit/" method="post" class="form">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% buttons %}
            <button type="submit" class="btn btn-primary">
                {% bootstrap_icon "star" %} Submit
            </button>
        {% endbuttons %}
    </form>

For about more information about bootstrap3’s tags, forms and other features, you can visit its documentation