[ad_1]
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…
..
[ad_2]
