Configurar Bootstrap 5 en Django - 10

Al igual que antes vamos a instalar Bootstrap en nuestro proyecto así que, vamos a la página oficial:

https://getbootstrap.com/

Y descargar la CDN.

Bootstrap, al ser un framework web del lado del cliente, usa CSS y JavaScript para poder utilizar cualquier componente o funcionalidad de Bootstrap; una vez descargado el comprimido anterior y generada la carpeta (la cual, para simplificar el proceso, renombramos como bootstrap) necesitamos los siguientes archivos:

elements/static/

bootstrap/css/bootstrap.min.css
bootstrap/js/bootstrap.min.js

Configuramos en la vista maestra:

<!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>

Y esto es todo, ya con esto, podemos usar Bootstrap 5 en una aplicación en Django.

Acepto recibir anuncios de interes sobre este Blog.

Aprenderemos a configurar B5 CDN en Django.

27-02-2025 - Andrés Cruz

In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro desarrollo web con Django 5 y Python 3 + integración con Vue 3, Bootstrap y Alpine.js.