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.