Containers
Stuff breakpoints and viewports sizes
Device | Extra small | Small | Medium | Large | Extra large |
---|---|---|---|---|---|
Breakpoint | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
Viewport | 100% | 540px | 720px | 960px | 1140px |
Example
Container
enable a centered viewport
<main class="container">
<h1>Hello, world!</h1>
<main>
Container Fluid
enable a 100%
layout
<main class="container-fluid">
<h1>Hello, world!</h1>
<main>
<header>
, <main>
and <footer>
as direct children of <body>
provide a responsive verticalpadding
<section>
provides a responsive margin-bottom
to separate your sections.