Crispy Forms
As Bootstrap cannot handle Django auto-generated input forms directly, styling the create and update pages requires an additional tool called Crispy Forms. Here are the key steps to implement Crispy Forms.
1. Install Crispy Forms and Bootstrap 5 Template pack
First, add two library names in the requirements.txt file.
- django-crispy-forms
- crispy-bootstrap5
Django==4.1.7
django-crispy-forms
crispy-bootstrap5
Run the pip command to install the two libraries.
pip install -r requirements.txt
2. Update settings.py
Update the settings.py file like shown below.
# template directory path
TEMPLATE_DIR = BASE_DIR / 'templates'
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'test_app',
'employee_learning',
'crispy_forms',
'crispy_bootstrap5',
]
3. Update the Create and Update page templates
To use Crispy Forms, you need two adjustments.
- Add the
{% load crispy_forms_tags %}tag to load Crispy Forms - Change
{{ form.as_p }}to{{ form|crispy }}
Also, you can add some classes and styles to adjust the layout and sizes. For the create and update forms, we added min-width and max-width to prevent the forms from expanding or shrinking too much horizontally – try to make sizing nice and responsive.
The code below is an example of the changes in the Create page template. You can do the same for the Update page template.
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block body %}
<div class="container w-50" style="min-width:300px; max-width: 500px;">
<h1 class="m-5 text-center"> CREATE Page </h1>
<form method="post"> {% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Save" class="btn btn-primary d-block mx-auto">
</form>
</div>
{% endblock %}
4. Check the results
To check the results in your browser, run the runserver command again.
python manage.py runserver
You can see that the Create and Update pages are nicely designed now.
Library documentation reference: Django Crispy Forms
You can also learn this topic offline. Click 
.