Setting up Bootstrap 5 in Django - 10
Just like before, we are going to install Bootstrap in our project, so let's go to the official page:
https://getbootstrap.com/
And download the CDN.
Bootstrap, being a client-side web framework, uses CSS and JavaScript to be able to use any Bootstrap component or functionality; once the previous zip file has been downloaded and the folder generated (which, to simplify the process, we renamed bootstrap) we need the following files:
elements/static/
bootstrap/css/bootstrap.min.css
bootstrap/js/bootstrap.min.js
We configure in the master view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
{% block head %}
<link rel="stylesheet" href="url('{% static 'bootstrap/css/bootstrap.min.css' %}'">
<title>{% block title %} Admin {% endblock %}</title>
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block footer %}
Admin - <a href="#">Contact</a>
{% endblock %}
<script src="url('{% static 'bootstrap/js/bootstrap.min.js' %}'"></script>
</body>
</html>And that's it, with this, we can use Bootstrap 5 in a Django application.
I agree to receive announcements of interest about this Blog.
We will learn how to configure B5 CDN in Django.
- Andrés Cruz
This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro desarrollo web con Django 5 y Python 3 + integración con Vue 3, Bootstrap y Alpine.js.