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