Django crispy form

Sometimes we need to add bootstrap or any other library class to create responsive and well-designed form. We can do it using Django-crispy form. Here I add the steps to create a responsive form using the crispy form and Bootstrap 4.

Step1:

Install the crispy form using the following command.

pip install django-crispy-forms

Step2:

Open the settings.py file from the project app and add the following code in INSTALLED_APP surrounding double quotation mark.

crispy_forms

Step3:

Also, add the following snippet after INSTALLED_APP

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Step4:

Now re-write your form.html file with the following snippet in form element after csrf_token.

{% load crispy_forms_tags %}
{{ form.as_p | crispy}}

Alternative:

We also add crispy form in the different field of a form. Follow the below snippet

<div class="row">
    <div class="col-md-6">{{ form.district|as_crispy_field  }}</div>
    <div class="col-md-6">{{ form.thana|as_crispy_field  }}</div>
</div>
<div class="row">
    <div class="col-md-6">{{ form.post_office|as_crispy_field  }}</div>
    <div class="col-md-6">{{ form.code|as_crispy_field  }}</div>
</div>
<div class="row">
    <div class="col-md-12">{{ form.address|as_crispy_field  }}</div>
</div>
109 Views

About Author

Nasir

Welcome to CodeKit.xyz. I am working in an automation company as a software engineer. From the deep thirst of learning, I have developed this platform.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>