Tech

How to Use Bootstrap in a Django Project


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


Django uses Bootstrap’s pre-built CSS styles and JavaScript plugins to style web pages. While it reduces the hassle of styling, configuring it in Django can be challenging.

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 application or reference the files using Bootstrap’s CDN. This project will use the former method.

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

Next, install Bootstrap with the following command:

pipenv install django-bootstrap5  

Check the Pipfile and confirm there is a Bootstrap 5 dependency. You now need to notify the Django project that you are using a Bootstrap dependency.

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

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

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

Apply Bootstrap on a Template

First, create a folder named templates in your application folder. Inside this folder, create a base.html file and a navbar.html file. The templates will contain HTML files that Bootstrap will style.

While you can apply Bootstrap on the navbar.html template, using a base file is conventional. A base.html file will contain all the scripts and links to apply to any page. It reduces the complexity of individual templates, making your code cleaner and easier to understand.

In the base.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 templates. Include the {% bootstrap_css %} template tag and a link to the Bootstrap CSS file.

Next, create a block script that defines the JavaScript functionality.

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

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

<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, run the server and check your site in a browser. You should see the styling that Bootstrap applies to the navigation bar.

styled navigation bar on browser

Why Use Bootstrap in Django Projects?

You’ll mostly use Django for back-end development, but it can make amazing front-end pages too. Using Bootstrap to style front-end pages is good practice for Django beginners. You get an in-depth understanding of Django when you create full-stack applications.

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 style sheet. It also has improved responsiveness for modern devices.

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

Related Articles

Leave a Reply

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

Back to top button