How to add and use Bootstrap 5 in Django

Share your love

This article has affiliate links at no cost to you!

Are you tired of spending hours tweaking your Django templates to achieve a responsive and modern design? Oh, buoy! Bootstrap 5 utility classes should help you come up with effective page designs within no time then.

But, you must load Bootstrap 5 in your Django project, right? Absolutely!

In this article, I will walk you through how to add Bootstrap 5 to your Django project, use it in your templates, and at the end create a really cool contact form for an example.

Right away:

To use Bootstrap 5 in Django, do the following:

  • Open the Terminal window and navigate into the project folder
  • Activate the virtual environment by running source env/bin/activate
  • Install Django Bootstrap5 package by executing pip install django-bootstrap5
  • Update your project settings by adding ‘django_bootstrap5’ to the list of installed apps
  • Load django_bootstrap5 library using the {% load %} template tag in your base template (base.html) by adding the following code at the top of the file: {% load django_bootstrap5 %}
  • Load Bootstrap 5 css and js files in your base template using django_bootstrap5 tags. To do so, add the following lines of code inside the <head> tags: {% bootstrap_css %} {% bootstrap_javascript %}. To use Bootstrap alerts for your django.contrib.messages, add {% bootstrap_messages %} tag too.
  • Start using Bootstrap 5 CSS utility classes in your base template and all child templates that inherit from the base.html.

Following the steps above, you should be able to use Bootstrap 5 in your Django templates with ease. To polish your new skills, how about we create the example contact page project?

The preferred way to install the Bootstrap framework for your Django application is using the django-bootstrap5 Python package that can be installed using pip.

Because it is different from the previous Bootstrap version 4 setup, there are a couple of changes that you will need to be aware of:

  1. The new syntax
  2. You do not need additional packages like Django Crispy Forms to style your forms.

So, let’s get started and show you a step-by-step process of how you can use Bootstrap 5 with Django application to style the frontend of your web application and the forms, especially the contact form.

How to use Bootstrap 5 in Django templates

Follow these actionable steps to add and use Bootstrap 5 in your Django templates.

1. Create a new Django project directory

Open a new Terminal window, navigate into the Desktop folder, and create a new folder for our new Django project.

You may create a Django project folder anywhere on your file system.

cd ~/Desktop && mkdir new_django_project 

cd ~/Desktop/new_django_project

2. Create a new virtual environment

Create a new environment that you will use to install Django and the django-bootstrap5 package

Use the command below if you already have a particular directory for all your virtual environment.

I use the ~/.virtualenvs directory to store all my virtual environments. Use your preferred directory

python -m venv ~/.virtualenvs/new_django_project_env

If you want to create the same directory I use for all my virtual environments, use the command below:

mkdir ~/.virtualenvs 

python -m venv ~/.virtualenvs/new_django_project_env

3. Install Django and django-bootstrap5 in your new virtual environment

After creating the virtual environment, activate it and install Django and django-bootstrap5 packages

source ~/.virtualenvs/new_django_project_env/bin/activate

pip install django django-bootstrap5

4. Spin a new Django project

After installing the packages and their dependencies, create a new Django project in the same folder you created earlier. I used the Desktop directory earlier.

cd ~/Desktop/new_django_project

django-admin startproject DjangoWoof . 

I used DjangoWoof as the name of my project, but you can use any name for your Django project.

After successfully creating a new Django project, open the project’s folder with your favourite IDE or editor.

cd ~/Desktop/new_django_project && code .

5. Configure your Django project settings to include django_bootstrap5 app

Open the main project settings.py file and add django_bootstrap5 to your installed apps.

    'django_bootstrap5',
Add django_bootstrap5 to list of installed apps

6. Create a base template for your project

Next, create a new templates folder inside the main directory of your Django project (directory with the manage.py file).

Inside the templates directory, create a new file and name it base.html

You can use the Terminal to create the folder and file or use the IDE.

Using the Terminal, type the following:

cd ~/Desktop/new_django_project && mkdir templates

touch templates/base.html

If you are using the IDE, click File, then New File or New Folder

7. Configure your project to look for template files inside the project-level folder

After creating the templates directory and base.html, open the main settings.py file and replace the following line in the TEMPLATES variable inside the DIRS dictionary key

        'DIRS': [],

Initially, your TEMPLATES variable will look like this:

Configure TEMPLATES variable to render templates on Django project

Replace ‘DIRS’: [] with this line

        'DIRS': [BASE_DIR / 'templates'],

Your final TEMPLATES variable should now look like this

Configure Django to use templates folder for the base template

8. Load the django_bootstrap5 library and its tags in your base.html

Open the base.html file you had created earlier and add the following lines at the top of the file – inside the <head> tag.

{% load django_bootstrap5 %}

{% bootstrap_css %}

{% bootstrap_javascript %}

{% bootstrap_messages %}

9. Start using Bootstrap 5 utility classes in your Django templates

Create a template block that you will use for your project’s templates – add the following lines to the <body> tags

{% block content %}

{% endblock content %}

You can name the template block any name you want.

Your final file should look like this:

<!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.0">
    {% load django_bootstrap5 %}

    {% bootstrap_css %}

    {% bootstrap_javascript %}

    {% bootstrap_messages %}
    <title>DjangoWoof</title>

</head>
<body>
    {% block content %}

    {% endblock content %}
    
</body>
</html>

Your Django application is ready to use Bootstrap as the frontend framework to style your pages.

If you are at this point, you can skip ahead and start using Bootstrap tags to style your Django application pages.

For demonstration, let’s create a simple Django application that allows users to send information using a contact form.

How to style Django forms (contact form) with Bootstrap 5

Missing a contact form for your Django web application must be very unusual –

  1. You will need a way for your users to communicate with you without having to open an email app.
  2. You can use a contact form to receive important feedback on your website’s user experience.
  3. You can use a Django contact form to receive users’ contact information and store it in the database for future communication.

Let’s dive right into making a new contact form.

You can create a new app to create a functionality only designed for processing contact information.

Taking this approach allows you to add functionality to your contact form later.

For example, you may opt to integrate your Django application with MailChimp – then, it will be easier when you have a separate app.

I. Create a new contact app and add it to the list of INSTALLED_APPS

Open the Terminal and type the following:

python manage.py startapp contact

Add the contact app to your installed apps

    'contact',
How to add an app in Django

II. Define your contact app models

Let’s start by creating the model forms for the contact app. Open the models.py files inside the contact folder and add the following lines of code:

from django.db import models

# Create your models here.
class Contact(models.Model):
    name = models.CharField(max_length=255)
    email = models.EmailField()
    message = models.TextField()

    def __str__(self):
        return f"{self.name}'s message"

Here, we are using the name, email, and message fields as the attributes of the Contact table.

Django makes it easy to create tables, attributes, and relationships using the model.

The model will allow us to use the database to create persistent contact information.

III. Run the migrations

After defining the models, you should run the makemigrations command to translate the above Python code into SQL statements.

With that, we use the python manage.py makemigrations command.

Open the Terminal and run the following:

python manage.py makemigrations

However, we have only translated the SQL statement, but we have not made any changes to the database that would remain permanent in the database we are using.

Use the migrate command to run the actual SQL commands generated by the makemigrations commands.

python manage.py migrate

The result should indicate that the contact database table has been successfully created.

IV. Define the Contact app modelform

Now let’s create the form that will send data to the database table, contact.

The one thing I love about Django is how easily you can use boilerplates to extend functionality.

Instead of creating new forms, we can use model forms to render the attributes we defined in the database.

A model form provides an interface you can use to create an HTML form from an existing database model with a few lines of code. Find more information about how Django models work in this article.

Let’s define a model form for our Contact model.

Inside the contact folder, create a new file and name it forms.py.

cd ~/Desktop/new_django_project/contact && touch forms.py

Open forms.py and add the following lines of code:

from django.forms import ModelForm
from .models import Contact


class ContactForm(ModelForm):

    class Meta:
        model = Contact
        fields = '__all__'

The ContactForm instance will create an HTML form that we will use to collect data and save it to our contact table in the database.

The subclass ModelForm defines the specific form fields and corresponding HTML form widgets used across the form.

The Python class Meta defines the connection to which model to connect to and the fields that we want on our form.

In this case, we use all the fields in the database table.

You may use the exclude attribute to keep the default attribute from appearing on the form.

V. Create the view, URL, and template for your model form

Now, the form is complete, and we need to render the HTML form code to our template. We need to set up the views to render the generated form HTML.

Open the views.py file that is inside the contact folder and add the following lines:

from django.shortcuts import render
from .forms import ContactForm


# Create your views here.
def contact_view(request):
    form = ContactForm()
    context = {'form': form}
    template_name = 'contact.html'
    return render(request, template_name, context)

Here, we’re importing the generated form HTML, adding it to the context dictionary, and defining the template that the view will use to display the dynamic data on the front end of our web application.

Create a new folder inside the contact app and name it templates. Inside the templates folder, create a new file and name it contact.html.

cd ~/Desktop/new_django_project/contact && mkdir templates 

touch templates/contact.html

Open the contact.html file and add the following code

<form action="" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

We cannot view the generated form template because we do not have a URL for the contact form. Let’s create the URL endpoint for our contact form.

Open the main urls.py file that is inside the project folder. Add the following line at the top:

from django.urls import path, include

Under the admin endpoint, add the following line of code:

path('contact/', include('contact.urls'))

Your final urls.py file should look like this:

how to register app url endpoints on Django

Here, we are instructing Django to include the contact app URL endpoints in its URL endpoints. Without these lines, we cannot be able to access the contact form URL endpoint.

After that, create another urls.py file inside the contact folder.

The urls.py file of the contact app will include all the URLs used by the contact app. Mostly, any URL that starts with /contact will live inside this file.

cd ~/Desktop/new_django_project/contact && touch urls.py

Open the contact urls.py file and add the following lines of code:

from django.urls import path

from .views import contact_view

urlpatterns = [
    path('', contact_view),
]

The code above imports the contact form view we will render when one visits the /contact page of our website.

However, we have not included another contact/ because we already included it in the main urls.py file.

Otherwise, the file URL will be /contact/contact/ if we were to include that here.

Run Django development server:

python manage.py runserver

If we open the /contact URL, 127.0.0.1:8000/contact/, you can see the name, email, and message attribute rendered on our HTML template.

However, our form doesn’t look nice.

Rendering Django forms on a HTML template

Let’s try to style it up – which was the purpose of this tutorial.

VI. Style your contact form using Bootstrap 5 utility classes and django-bootstrap5 tags

Open the contact.html template inside the contact/templates folder and replace the whole file with the following lines of code:

{% extends 'base.html' %}
{% load django_bootstrap5 %}

{% block content %}
    <div class="container">
        <div class="row my-5">
            <div class="col-md-12">
                <form action="/contact/" method="post" class="form">
                    {% csrf_token %}
                    {% bootstrap_form form %}
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
Rendering Django forms using Bootstrap 5 frontend framework

And voila! You have a very nice contact form for your web application.

We can go into deeper details on how to customize the form and use the Bootstrap 5 frontend framework on your Django app.

If you want to know more about how to develop websites with Django, you should definitely check out Django for Beginners: Build Websites with Python and Django OR this resource page that includes books, courses, and a career path that takes you from a complete beginner to a professional full-stack web developer.

The code used in this tutorial is available on GitHub, be sure to check it out or use it as a template for your new Django projects.

Want to be a master Python Django developer?

Check this out…

Django 4 and Python Full-Stack Developer Masterclass

This course offers a comprehensive solution to all your problems. Whether you are struggling with creating responsive and dynamic Django websites or connecting your Django web app to an SQL database, this course is for you.

First, you’ll learn the basics of HTML and CSS, essential for creating static elements and stylish, responsive layouts with Bootstrap.

Then, you’ll dive into Django, mastering the essentials of function and class-based views, the powerful Django Template Language, and Django Models for interacting with your SQL backend.

With this course, you’ll have all the tools necessary to create professional-grade Django web applications that look great and work flawlessly.

So why wait? Enroll today and start your journey toward becoming a successful Django developer!

Enroll now (Udemy)

And that’s it for this tutorial, and I hope to see you next time.

Share your love
Badi
Badi

Badi here, creator of ngangasn.com— A website dedicated to providing helpful information and how-to's of web development and hosting. Inspired by a fascination to write the most efficient code to make a computer laugh, & humans, Steve has a passion for organizing characters to create code and informative content.
What makes me happy?
Well, nothing like the feeling of finally figuring out that one pesky bug that's been driving me crazy.

3 Comments

  1. This post is correctly titled. Thank you I have just this week started using Django and was perplexed on how to get bootstrap5 working properly. Thanks to this post I am moving forward again

  2. Thanks for the very useful stuff. I am grateful for your work. This post helped me in my learning of Django. It shows the whole procedure in detail but…
    You forgot to register your app ( Contact ) in settings.py.
    Still, it’s a very valuable blog.

    • Thank you for taking the time to provide positive feedback. It helps a lot in creating new content for you guys.
      I’m glad to hear that the post was useful in your learning of Django.
      Regarding the issue you mentioned, it is actually covered in the blog post. To register the Contact app in settings.py, you can add the app’s name to the INSTALLED_APPS list, like this:

      INSTALLED_APPS = [
      ‘django.contrib.admin’,
      ‘django.contrib.auth’,
      ‘django.contrib.contenttypes’,
      ‘django.contrib.sessions’,
      ‘django.contrib.messages’,
      ‘django.contrib.staticfiles’,

      ‘contact’, # <– add this line
      ]

      I hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *