Como agregar bootstrap a DJANGO

Con este artículo quiero enseñarte como agregar o integrar Bootstrap a django, un requerimiento que muchas veces es útil para desarrollar nuestro frontend de forma más rápida y usando buenas prácticas. Para los que no lo conocen Bootstrap es uno de los frameworks de maquetado más usados en el mundo.

Agregando Bootstrap a nuestro HTML

Existen 2 vías principales para agregar una librería externa a nuestro proyecto de DJANGO.

La primera: descargamos y copiamos los archivos directamente a nuestro proyecto.

La segunda: enlazamos los archivos desde un servidor CDN(Content Delivery Network).

Al final tenemos el mismo resultado solo que cada método tiene sus ventajas. Yo personalemente en la mayoría de los proyectos web uso la vía de enlazarlos vía CDN, sobre todo por cuestiones de eficiencia y quitarle trabajo a mi servidor.

1- Vamos al sitio de Bootstrap y en la seccion de Donwload vamos y copiamos el código para enlazar desde un servidor CDN los archivos del código.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>

2- Debemos agregar esos enlaces en nuestro base.html o en el template de nuestro proyecto de DJANGO donde querramos hacer uso de bootstrap.

Después de este paso ya nuestro proyecto DJANGO está listo para hacer uso del framework. Debemos ir a la documentación y aprender a usar este framework.

Tenemos muchas clases que usar para mejorar y estandarizar nuestro proyecto en cuanto a diseño.

Acá les dejo un ejemplo de como agregar bootstrap a una tabla.

<table class="table table-bordered table-striped">
        <thead>
        <th>Nombre</th>
        <th>Descripción</th>
        <th>Cantidad</th>
        <th>Precio</th>
        </thead>
        <tbody>        
            <tr>
                <td>Pan</td>
                <td>
                   Pan artesanal mejor calidad
                </td>
                <td>10</td>
                <td>$15.00</td>
            </tr>

        </tbody>
    </table>

El resultado es el siguiente si tuvieramos más filas en nuestro código anterior:

Happy coding. 🙂 No olviden dejar su comentario si tienen cualquier duda.