Como integrar Django y Bootstrap 4

Django

Demo Github

Cuando optas por trabajar la vista o la parte Frontend de tu proyecto, una de las mejores opciones es Bootstrap, hasta la fecha de este artículo este Framework se encuentra en su  versión 4, te recomendamos leer el artículo Diseña Tu Primera Página Web con Bootstrap 4 para que te familiarices con este Framework antes de despegarlo dentro de Django, en este artículo te enseñaremos a como integrar Bootstrap 4 a tu proyecto creado con Django.

imagen: getbootstrap.com

Antes de continuar es importante que tengas desplegado Django y su gestor de paquetes PIP (Package Installer Python), te recomendamos leer este artículo Que es Django y como instalarlo para que dejes Django y PIP correctamente configurados y listos para trabajar.

Django Bootstrap 4

El repositorio PyPI cuenta con un paquete para instalar Bootstrap 4 rápidamente, simplemente abrimos nuestra consola de comandos y ejecutamos lo siguiente:

Ahora ve a tu archivo settings.py y agrega Bootstrap en la parte INSTALLED_APPS

Con esto ya tenemos instalado Bootstrap 4 en Django y todo en cuestión de segundos, Genial no ?

Desplegando Bootstrap 4 en Django

Ahora abre de nuevo tu archivo settings.py y agrega la ruta del directorio a tus templates o plantillas

Abre tu archivo urls.py y agrega la ruta para visualizar la vista que haremos con Bootstrap 4

Ahora abre tu archivo views.py y agrega la vista a la pagina index.html que es la vista html en donde mostraremos los elementos y la pagina en Bootstrap 4

Listo ahora creamos una carpeta llamada templates y dentro de ella creamos un archivo llamado index.html y lo que haremos es entre las etiquetas <head></head> instanciamos las librerias CSS de Bootstrap

Y para la libreria jQuery y los archivos Javascript de Bootstrap, antes de cerrar la etiqueta </body> debajo del documento html  los instanciamos

Listo, ahora podemos agregar todo tipo de componentes de Bootstrap 4 que necesitemos usar, todo los colocamos dentro de las etiquetas <body></body>

Puedes ver el demo que esta al inicio del artículo, para que te des una idea de como quedo el resultado final.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required