Style Forms in Django Using django-bootstrap4

by | 11 Jul 2018 | Coding Journey | 0 comments

Styling Forms in Django Applications Using django-bootstrap4

Django is a great framework and a lot is included but certainly forms look absolutely horrible. Bootstrap though formats everything nicely for us. How can we join them both? We will use a wonderful library called django-bootstrap4. In the tutorial below you should learn the basics of it.

Recent Comments

    Style Forms in Django Using django-bootstrap4

    by | 11 Jul 2018 | Coding Journey | 0 comments

    Styling Forms in Django Applications Using django-bootstrap4

    Django is a great framework and a lot is included but certainly forms look absolutely horrible. Bootstrap though formats everything nicely for us. How can we join them both? We will use a wonderful library called django-bootstrap4. In the tutorial below you should learn the basics of it.

    Getting Started

    First step is to install django-bootstrap4 in our Django’s virtual environment. You can also have a look at this project’s code on Github.

    Update requirements.txt

    Add django-bootstrap4 to your requirements file.

    Update settings.py to use django-bootstrap4

    Now open settings.py in your projects main folder and add the newly installed app to INSTALLED_APPS.

    Create a Form Template

    I like to reuse my forms as much as possible and prefer to have a template which unifies forms’ style. We will create a simple template showing the power of django-bootstrap4. This template (form.html) then will be used as an include in yet another template. I prefer to keep all those globally used templates in the core app inside my Django projects.

    For this form to work you need bootstrap 4 loaded. I do it in the head of the base django template (the css) that all pages use and in the scripts section at the bottom of the base template I load all the jquery and other stuff. See here for instructions on how to add bootstrap to your site.

    Alternatively you can use tags built-in to django-bootstrap4 to load bootstrap dependencies for you but I prefer to have it in one place in the main base template.

    To Use django-bootstrap4 Tags to Get Bootstrap 4 dependencies

    {# Load CSS and JavaScript #}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}

    How Does it Work?

    In line 1 we load django-bootstrap tag using: {% load bootstrap4 %}.
    On top of the form we have a division where we can insert form’s title (line 5) – you will see how to do that from within an another Django template in the next section.
    Line 8 allows us to show messages sent back by django.contrib.messages as Bootstrap alerts.
    Following that in line 9 we begin our form as in any normal html markup and include the csrf token in line 10 (security, security, security!)

    Line 11 is the crucial part where we finally use {% bootstrap_form %} tag to generate our form. The form word after bootstrap_form is the name of the form provided to the template by the context from the Django view which will get rendered. If you specify your own form name and send it via context data to be used in the template you will have to adjust that name.

    Example:

    In get_context_data() you pass store_form as the form to the template for rendering.

    To render the form using django-bootstrap4 you then add a line:

    {% bootstrap_form store_form <other options> %}

    Notice that we can customise the rendering of the form in the same line using options mentioned in the documentation.
    I chose horizontal, small sized layout and also specified a class for all the field’s labels.

    From line 14 to 18 we have our buttons declared. Again you can fully customise that using standard bootstrap classes or your own styles.

    Use Our Form as an Include

    Since our form.html is meant to be used as an include inside other templates let’s now have a look how it’s done. I will use a simple example from my B.Nice app – a template which renders an action update view.

    Our form will be inserted in place of block called form and rendered with title variable set to “Action Update Form”.

    Rendered Version of the Form

    Conclusions

    You have seen how easy it is to auto generate a nicely bootstrap styled form with help of django-bootstrap4. We have not even scratched the surface of the matter as you can create fully custom forms using built-in django template tags (for / if tags etc.)  and iterating over the fields of your form and applying styles automatically to each field with support from django-bootstrap4.

    If I find some more time I will cover more customised forms later on.

    Thanks for reading. ‘Till next time.

    Recent Comments

      0 Comments

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      Created by: Tomasz Kluczkowski

      Copyright © 2017

      Created by: Tomasz Kluczkowski

      Copyright © 2017