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 childs of <body>
provide a responsive vertical padding
<section>
provides a responsive margin-bottom
to separate your sections.