Primary container element for page layout
See more examples
||Sets the max width of the container, which includes some padding. "lg" grows up to 1536px, "md" starts at 800px and
shrinks down, and "sm" starts at 576px and shrinks down.
Read more on maxwidth for details.
More on maxwidth
By default Container will grow up to 1,536 pixels wide, which is intended to make full use of a screen up to the equivalent of a 16" MacBook Pro. You can remove this limit with
In cases where there isn't a full page of content or maybe a more focused layout is desired,
md is often the right width. On-boarding flows or a promotional page are good examples where medium would be useful. In some cases a very narrow and focused layout is needed, like a log in form. Use
sm for these.
In all cases Container includes padding and centers itself in the viewport.
A page can have multiple containers. This is most common when two components should share the same container characteristics, like max width and centered in the viewport, but need to have different backgrounds or other design elements that prevent sharing a single container. A site navigation is a good example:
And the rest of the page's content is here in another container.
Note how this section and the site nav's content are aligned.
Other layout elements
In addition to M-'s Container and Grid, HTML offers a number of semantic elements for layout. From W3Schools:
<header>Defines a header for a document or a section
<nav>Defines a container for navigation links
<section>Defines a section in a document
<article>Defines an independent self-contained article
<aside>Defines content aside from the content (like a sidebar)
<footer>Defines a footer for a document or a section
There are no accessibility recommendations for Container.