${require('./_head.html') title=`Containers` description=`.container enable a centered viewport, .container-fluid enable a 100% layout.` canonical=`containers.html` } ${require('./_nav.html')}
${require('./_sidebar.html') active=`containers-link`}

Containers

.container enable a centered viewport.
.container-fluid enable a 100% layout.

<body>
  <main class="container"></main>
</body>

Pico uses the same breakpoints and viewports sizes as Bootstrap.

Device Extra small Small Medium Large Extra large
Breakpoint <576px ≥576px ≥768px ≥992px ≥1200px
Viewport 100% 540px 720px 960px 1140px

<header>, <main> and <footer> as direct children of <body> provide a responsive vertical padding

<section> provides a responsive margin-bottom to separate your sections.

${require('./_footer.html')}