Django bootstrap 4 form template

In this article, you will learn how to style a django form template using bootstrap 4. Bootstrap 4 is the newest version of Bootstrap, which is the most popular framework, with new components, more responsive and a faster stylesheet for developing responsive websites. It is completely free to download and use.

Django is a free, open-source, python-based framework. It enables fast development of any type of web application. It is secure, maintainable, portable, and scalable. The main advantages of using Django are that it has fully loaded common web development tasks, like administration, authentication, site maps, etc.

As we're going to develop applications using Django, if you have not installed the Django package, please follow the Django documentation for initial setup.

We are creating an empty project 'event' and a new app 'participant'-

(env) c:\python37\Scripts\projects>django-admin startproject event

(env) c:\python37\Scripts\projects>cd event

(env) c:\python37\Scripts\projects\event>django-admin startapp participant

Install django-crispy-forms

The Django-crispy-forms is an application that helps to manage Django forms. It allows us to easily add and render Bootstrap 4 styled forms with a few lines of code. Here is the command to install django-crispy-forms using the pip tool-

pip install django-crispy-forms

settings.py

After creating the app, we need to mention this in the configurations. Do this by editing your settings file and changing the INSTALLED_APPS setting to add the name of the module and the name of the installed 'django-crispy-forms'-

INSTALLED_APPS = [
    ......
    ......
    'participant',
    'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

models.py

The model helps to map the fields to the database. Here, we have placed the following code in 'models.py'.

from django.db import models

# Create your models here.

class Participant(models.Model):
    
    # participant form fields
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.CharField(max_length = 250)
    dob = models.DateField(auto_now=False, auto_now_add=False)
    city = models.CharField(max_length=150)

    class Meta:
        db_table = "participants"

forms.py

In a similar way that a model class's fields map to database fields, a form class's fields map to HTML form elements. The ModelForm is required to collect the form data. Here, we have created a ModelForm 'forms.py' under 'participant' app, whose fields are taken from the database table.

from .models import Participant
from django import forms

class ParticipantForm(forms.ModelForm):
    class Meta:
        model = Participant
        fields = ("__all__")

views.py

In the 'views.py', we have imported 'ParticipantForm' form and 'Participant' model. Next, we define a function called displayData() for rendering the 'index.html' page.

from django.shortcuts import render
from .forms import ParticipantForm
from .models import Participant

def displayData(request):
    form = ParticipantForm()
    participants = Participant.objects.all()
    return render(request, "index.html",
                  {"form": form, "participants": participants})

Templates

This HTML file includes the jQuery library and Bootstrap 4 files. We have specified one block for content, which will be included from 'index.html' page.

main.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>{% block title %}{% endblock title %}</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	</head>

	<body>
		{% block content %}
		{% endblock content %}

		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	</body>
</html>

index.html

These are the very simple code for rendering crispy form -

{% extends "main.html" %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <form method="post">
		{% csrf_token %}
		{{ form|crispy }}
		<button type="submit" class="btn btn-success">Create Participant</button>
    <form>
</div>
{% endblock content %}

When we execute the above project, it will render the following on the browser -

You can show above how we can easily control the form with bootstrap 4 that automatically receives some global styling and responsiveness.

Python | Uploading images in Django
Django pass variable from view to HTML template
How to read and write a file using Django
Django serialize queryset into JSON and display in template
Django Export Model Data to CSV
Django Custom User Model SignUp, Login and Logout
How to display image from database in Django
Django Pagination with Ajax and jQuery
Django download file
Django Simple File Upload
Django ajax GET and POST request
Django upload image to database
Windows command to create and run first Django app
Django Send Mail on Contact form submission
How to insert data in MySQL database from an HTML form using Django
Convert MySQL query result to JSON in Python
Display data from MySQL in HTML table using Python
Insert XML Data to MySQL Table using Python
CRUD operations in Python using MYSQL Connector