Creating a Bootstrap Container in Django App - 13

▶

Now we are going to avoid our content appearing all stretched out, but rather centered, so that we can do this, we will use Bootstrap's container system:

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

The container is nothing more than a box to place our content so that it does not appear elongated, there are several types:

• container-sm
• container-lg
• container

What changes is the breakpoint, at which the box will adapt to the screen size

So we can place the container in one place, in our master template:

mystore\elements\templates\base.html

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

From your developer console tool this option which is a phone with a computer behind and pending here This is the size of the client would be and this is the browser obviously this is the this is the container the size that the container has here 1500 since the client screen is 1500 is greater than 1400 which is what it is indicating to you here the container will have a size of 1320 and this is done through the media quar css here you can see that the maximum size is 1320 So when the screen is less than 1400 the container size will be 1100 and so on for the rest of the cases So if we shrink here a little bit see that we have already passed 1400 just on that side the container shrinks and here it is using another media query as you can see and so on for the rest of the cases so with this we define a for our content