Como integrar Django y Bootstrap 4

Nube Colectiva

hace 6 años

En esta página:

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.

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:


pip install django-bootstrap4

Collecting django-bootstrap4
  Downloading https://files.pythonhosted.org/packages/80/ad/23a156a282c733c33bc7282572b89d00131130519e0de18013e7e3fcb6e3/django-bootstrap4-0.0.6.tar.gz
Building wheels for collected packages: django-bootstrap4
  Running setup.py bdist_wheel for django-bootstrap4: started
  Running setup.py bdist_wheel for django-bootstrap4: finished with status 'done'
  Stored in directory: C:\Users\FRONTEND\AppData\Local\pip\Cache\wheels\a2\92\2f\110d092bcbf7e25347880d2975e8c53bf1c33177ea3b360478
Successfully built django-bootstrap4
Installing collected packages: django-bootstrap4
Successfully installed django-bootstrap4-0.0.6

pip install django-bootstrap4

Collecting django-bootstrap4

Downloading https://files.pythonhosted.org/packages/80/ad/23a156a282c733c33bc7282572b89d00131130519e0de18013e7e3fcb6e3/django-bootstrap4-0.0.6.tar.gz

Building wheels for collected packages: django-bootstrap4

Running setup.py bdist_wheel for django-bootstrap4: started

Running setup.py bdist_wheel for django-bootstrap4: finished with status 'done'

Stored in directory: C:\Users\FRONTEND\AppData\Local\pip\Cache\wheels\a2\92\2f\110d092bcbf7e25347880d2975e8c53bf1c33177ea3b360478

Successfully built django-bootstrap4

Installing collected packages: django-bootstrap4

Successfully installed django-bootstrap4-0.0.6

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


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4', # Acá
    'tutorial',
]

# Application definition

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'bootstrap4', # Acá

'tutorial',

]

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


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],  # Acá
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [os.path.join(BASE_DIR, 'templates')], # Acá

'APP_DIRS': True,

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

]

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


urlpatterns = [
    path('', views.index, name='index'),  # Acá
    path('admin/', admin.site.urls),    
]

urlpatterns = [

path('', views.index, name='index'), # Acá

path('admin/', admin.site.urls),

]

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


from django.shortcuts import render_to_response

def index (request):
    return render_to_response('index.html')

from django.shortcuts import render_to_response

def index (request):

return render_to_response('index.html')

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


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Como integrar Django y Bootstrap 4 </title>

  	  {# Cargamos la librería #}
	  {% load bootstrap4 %}

	  {# CSS Bootstrap #}
	  {% bootstrap_css %}


  </head>

<head>

<title>Como integrar Django y Bootstrap 4 </title>

{# Cargamos la librería #}

{% load bootstrap4 %}

{# CSS Bootstrap #}

{% bootstrap_css %}

</head>

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


          {# JS y jQuery Bootstrap #}
	  {% bootstrap_javascript jquery='full' %}
    
  </body>
</html>

{# JS y jQuery Bootstrap #}

{% bootstrap_javascript jquery='full' %}

</body>

</html>

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.