2021-10-31 21:33:19 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Containers"
description=".container enable a centered viewport, .container-fluid enable a 100% layout."
canonical="containers.html"
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="containers-link"}
< div role = "document" >
< section id = "containers" >
< hgroup >
2021-11-02 00:20:55 +07:00
< h1 > Containers< / h1 >
< h2 >
2021-10-31 21:33:19 +07:00
< code > .container< / code > enable a centered viewport.< br >
< code > .container-fluid< / code > enable a < code > < u > 100%< / u > < / code > layout.
2021-11-02 00:20:55 +07:00
< / h2 >
2021-10-31 21:33:19 +07:00
< / hgroup >
< pre > < code > < < b > body< / b > >
< < b > main< / b > < i > class< / i > =< u > "container"< / u > > < /< b > main< / b > >
< /< b > body< / b > > < / code > < / pre >
2021-12-19 09:46:54 +07:00
< p > Pico uses the same breakpoints and viewports sizes as < a href = "https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints" > Bootstrap< / a > .< / p >
2021-10-31 21:33:19 +07:00
< figure >
< table role = "grid" >
< thead >
< tr >
< th > Device< / th >
< th > Extra small< / th >
< th > Small< / th >
< th > Medium< / th >
< th > Large< / th >
< th > Extra large< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th > Breakpoint< / th >
< td > < 576< small > px< / small > < / td >
< td > ≥576< small > px< / small > < / td >
< td > ≥768< small > px< / small > < / td >
< td > ≥992< small > px< / small > < / td >
< td > ≥1200< small > px< / small > < / td >
< / tr >
< tr >
< th > Viewport< / th >
< td > 100< small > %< / small > < / td >
< td > 540< small > px< / small > < / td >
< td > 720< small > px< / small > < / td >
< td > 960< small > px< / small > < / td >
< td > 1140< small > px< / small > < / td >
< / tr >
< / tbody >
< / table >
< / figure >
< p > < code > < < b > header< / b > > < / code > , < code > < < b > main< / b > > < / code > and < code > < < b > footer< / b > > < / code > as direct childs of < code > < < b > body< / b > > < / code > provide a responsive vertical < code > < i > padding< / i > < / code > < / p >
< p > < code > < < b > section< / b > > < / code > provide a responsive < code > < i > margin-bottom< / i > < / code > to separate your sections.< / p >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
