Container
A utility for fixing an element's width to the current breakpoint
Class reference
Usage
The .container
class sets the max-width
of an element to match the min-width
of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
Note that unlike containers you might have used in other frameworks, Elements’ container does not center itself automatically and does not have any built-in horizontal padding.
To center a container, use the .mx-auto
utility:
<div class="container mx-auto">
<!-- ... -->
</div>
To add horizontal padding, use the .px-{size}
utilities:
<div class="container mx-auto px-4">
<!-- ... -->
</div>
If you’d like to center your containers by default or include default horizontal padding, you can add the custom styling below to your local stylesheet.
.container {
margin-left: auto;
margin-left: auto;
padding-right: 1.5rem;
padding-right: 1.5rem;
}
On this Page
v1.13.5