Crear un Container de Bootstrap en la app de Django - 13

▶

Ahora vamos a evitar que nuestro contenido aparezca todo alargasi no que aparezca como quien dice centrado ya para ello, usaremos Bootstrap el sistema de containers:

https://getbootstrap.com/docs/5.0/layout/containers/

El container no es más que una caja para colocar nuestro contenido para que no aparezca todo alargado, hay varios tipos:

• container-sm
• container-lg
• container

Lo que cambia es el punto de ruptura, en la cual la caja va a adaptarse al tamañode la pantalla

Así que podemos colocarlo en un solo lugar el contaner, en nuestra plantilla maestra:

mystore\elements\templates\base.html

<div class="container">
{% block content %}
   
{% endblock  %}
</div>

Desde tu herramienta de la consola de desarrolladores esta opción que es un teléfono con una computadora atrás y por aquí pendiente Este es el tamaño del cliente sería y este es el navegador obviamente este es el este es el container el tamaño que tiene el container acá 1500 ya que la pantalla el cliente es 1500 es mayor a 1400 que es lo que te está indicando por acá el container va a tener un tamaño de 1320 y esto se hace mediante los media quar css aquí puedes ver que el tamaño máximo es de 1320 Entonces cuando la pantalla sea menor a 1400 el tamaño de contenedor va a ser de 1100 y así para el resto de los casos Así que si encogemos aquí un poquito mira que ya pasamos de los 1400 justamente en ese lado el container se encoge y por aquí está utilizando otro media query tal cual puedes ver y así para el resto de los casos así que ya con esto definimos un para nuestro contenido