How to use Bootstrap in a Django project

Since its release in 2013, Bootstrap has revolutionized the way developers style web pages. Bootstrap is a popular front-end framework used to design responsive web applications.


Django uses Bootstrap’s predefined CSS styles and JavaScript plugins to style web pages. While it takes the hassle out of styling, setting it up in Django can be tricky.

Let’s learn how to install and configure Bootstrap in a Django application.


How to install Bootstrap

There are two ways to use Bootstrap 5 in a Django project. You can install it in your app or reference the files using Bootstrap’s CDN. This project will use the old method.

Before installing Bootstrap, create a Django project and an app called gallery. The app will be a photo gallery and you will use Bootstrap to style the app’s navigation bar.

Next, install Bootstrap with the following command:

pipenv install django-bootstrap5  

Check the Pipfile and confirm that there is a Bootstrap 5 dependency. Now you need to let the Django project know that you are using a Bootstrap dependency.

In the settings.py file, save Bootstrap as shown below:

INSTALLED_APPS = [
'gallery',
'bootstrap5',
]

Registering Bootstrap in project settings connects the django-bootstrap5 dependency to your project. It will be available for any other application defined in the project.

Apply Bootstrap to a template

First, create a folder named models in your application file. In this folder, create a database.html folder and a navbar.html case. Templates will contain HTML files that Bootstrap will format.

Although you can apply Bootstrap on the navbar.html template, the use of a base file is classic. A database.html The file will contain all the scripts and links to apply to any page. It reduces the complexity of individual models, making your code cleaner and easier to understand.

In the database.html file, include the following:

{% load bootstrap5 %}

<!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">
<title> Gallery </title>

{% block styles %}

{% bootstrap_css %}

{% endblock %}

</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
{% bootstrap_javascript %}
</body>
</html>

First, load the bootstrap5 dependency. Then create two block styles where you will define all the styles for the models. Include the {% bootstrap_css %} template tag and a link to the Bootstrap CSS file.

Next, create a block script that defines JavaScript functionality.

Including the navbar.html in the database.html links it to Bootstrap.

Test the configuration by adding Bootstrap styles to the navbar.html model:

<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<h2 class="brand" style="color:green">PICHA GALLERY</h2>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li>
<li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li>
</ul>
</div>
</div>
</nav>

Now launch the server and check your site in a browser. You should see the style that Bootstrap applies to the navbar.

stylish navigation bar on browser

Why use Bootstrap in Django projects?

You will mainly use Django for back-end development, but it can also create amazing front-end pages. Using Bootstrap to style front-end pages is good practice for Django beginners. You get a deep understanding of Django when you build full-stack apps.

Like any front-end framework, you can use Bootstrap classes with a Django project to style your web pages. Bootstrap 5 has better components and a fast stylesheet. It has also improved the responsiveness of modern devices.

Why not use Bootstrap to style and create amazing user interfaces for your Django projects? Django will amaze you with its web development capabilities.

Comments are closed.