Django Web Framework Tutorials

Django Crispy Forms and Bootstrap 5

Last Updated: by

Creating forms is a fundamental aspect of web development, but styling them to match the overall design can be time-consuming. Django, a powerful Python web framework, offers a solution in the form of “Crispy Forms,” a third-party package that seamlessly integrates with Bootstrap, one of the most popular front-end frameworks. In this blog, we’ll explore how to use Django Crispy Forms with Bootstrap 5 to simplify form styling and enhance user experience.

For this Tutorial, we are extending the project which we created in How to Integrate and Use Bootstrap 5 in Django

Table of contents

1. Introduction to Django Crispy Forms and Bootstrap 5

Django Crispy Forms is an efficient package that helps in rendering Django forms using Bootstrap styles. Bootstrap 5, the latest version of the front-end framework, offers a plethora of pre-designed components and responsive features.

2. Benefits of Using Crispy Forms with Bootstrap

  • Time Savings: Avoid manual coding of Bootstrap classes for form styling.
  • Consistency: Maintain consistent design across your application’s forms.
  • Responsive: Enjoy built-in responsiveness, ensuring forms look great on various devices.
  • Easy Customization: Customize form layouts and styles without reinventing the wheel.

3. Integrating Crispy Forms

  1. Install Crispy Forms & Bootstrap5 template pack: In your terminal, install the django-crispy-forms and crispy-bootstrap5 package:
pip install django-crispy-forms
pip install crispy-bootstrap5
  1. Add Crispy Form Settings: In your project’s settings.py, add 'crispy_forms' to the INSTALLED_APPS list:
INSTALLED_APPS = [
       # ...
       'crispy_forms',
       'crispy_bootstrap5', 
       # ...
]


CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"

CRISPY_TEMPLATE_PACK = "bootstrap5"

4. Styling Forms with Bootstrap Classes

  1. Use Crispy Form Tags: In your Django template, load crispy form tags at the top:
{% load crispy_forms_tags %}
  1. Apply Crispy Form Tag to Form: Add the {% crispy %} tag to render your form with Bootstrap styles:
<form method="post">
       {% csrf_token %}
       {% crispy form %}
       <button type="submit" class="btn btn-primary">Submit</button>
</form>

5. Customizing Form Layouts

  1. Create a Layout: Define a form layout using Bootstrap classes:
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Field

class MyForm(forms.Form):
    field1 = forms.CharField(label='Field 1')
    field2 = forms.EmailField(label='Field 2')

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('field1', css_class='custom-class'),
            Field('field2', css_class='custom-class'),
            Submit('submit', 'Submit', css_class='btn btn-primary')
        )

6. Conclusion

Combining Django Crispy Forms with Bootstrap 5 streamlines the process of creating and styling forms in your web applications. The seamless integration and pre-designed styles of Bootstrap reduce the manual effort needed to achieve user-friendly design. Whether you’re building a registration form, a contact form, or any other type of form in your Django application, using Crispy Forms and Bootstrap 5 ensures a consistent user experience.

Find this tutorial on Github.

Blogs You Might Like to Read!