How to Use Bootstrap 4 Forms With Python Django?
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 FormsIn 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:
settings.pyINSTALLED_APPS = [
...
'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'
Step 2 : Create a Model
In this step we will require the database model for storing contacts.Open the article/models.py file and add the following code:
article/models.pyfrom 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/views.py file and add:
article/views.pyfrom .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:
/article/article_form.html{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Use Bootstrap 4 Forms With Python Django?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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? - Tuts-Station.com</h4>
</div>
<div class="card-body">
<form method = "post" enctype="multipart/form-data">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 5 : Creating Urls
In this section, we’ll create the urls to access our views.Go to the urls.py article/urls.py file and update it as follows:
article/urls.pyfrom 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 manage.py runserver
Next, go to the http://localhost:8000/create address with a web browser.
Output
I Hope It will help you....