Container

Class reference

The .container class sets the max-width of an element to match the min-width of the current breakpoint.

Note that the container, does not center itself automatically and does not have any built-in horizontal padding.

Center a container

To center a container, use the .mx-auto utility:

<div class="container mx-auto">
  <!-- ... -->
</div>

Add horizontal padding

To add horizontal padding, use the .px-{size} utilities:

<div class="container mx-auto px-4">
  <!-- ... -->
</div>