How to Use Bootstrap 4 Forms With Python Django?

Published On: 27/06/2022 | Category: Django Python

Hi Dev,

Here, I will show you how to use bootstrap forms with python django. I would like to show you how to use bootstrap forms with python django api. I would like to share with you how to use bootstrap forms with python django and python. This post will give you simple example of how to use bootstrap forms with python django bootstrap with django crispy forms. Alright, let’s dive into the steps.

Here, crispy forms is a great application that gives you control over how you render Django forms, without breaking the default behavior. This tutorial is going to be tailored towards Bootstrap 4.

Here i will give you we will help you to give example of how bootstrap forms with python django. So let's see the bellow example:

Step 1 : Install a Crispy Forms

In this step, we’ll install a crispy forms. Install it using pip command:

pip install django-crispy-forms

Add it to your INSTALLED_APPS and select which styles to use:


Step 2 : Create a Model

In this step we will require the database model for storing contacts.Open the article/ file and add the following code:

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=50)
    content = models.TextField()
Step 3 : Creating the Views

In this step, we need to create the views for performing render view file the article/ file and add:

from .models import Article
from django.views.generic import CreateView

class ArticleCreateView(CreateView):
    model = Article
    fields = ('title', 'content')
Step 4 : Creating Django Templates

Next, open the article/article_form.html file and the add:

{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>How to Use Bootstrap 4 Forms With Python Django?</title>
    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">
    <script src="[email protected]/dist/jquery.slim.min.js"></script>
    <script src="[email protected]/dist/umd/popper.min.js"></script>
    <script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <div class="container mt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h4>How to Use Bootstrap 4 Forms With Python Django? -</h4>
                    <div class="card-body">
                        <form method = "post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ form|crispy }}
                            <button type="submit" class="btn btn-success">Submit</button>
Step 5 : Creating Urls

In this section, we’ll create the urls to access our views.Go to the article/ file and update it as follows:

from django.urls import path
from article.views import *

urlpatterns = [
    path('create', ArticleCreateView.as_view(), name='create'),
Step 6 : Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/create address with a web browser.


I Hope It will help you....