Elrendezés.

• konténertípusok és töréspontjaik
• reszponzív és automatikus oszlopok
• sortörés, sorrend, eltolás, beágyazás
• igazítás a sorban és a sorok között

Ötféle konténer, mindegyik közvetlenül a body-ban (a régi változatban egy külső .container-be voltak zárva, ezért mind ugyanolyan szélesnek látszott). A .container-md azt jelenti: 768 px alatt 100% széles, attól kezdve úgy viselkedik, mint a .container. Váltogasd a szélességet!

A col-4 minden szélességen a sor harmada. A col-12 col-md-6 col-lg-3 mobilon teljes széles, tableten fél, laptopon negyed. A számozás nélküli col egyenlően osztozik a helyen, a col-auto pedig pontosan akkora, mint a tartalma. A háttér csíkozása a sor területét jelzi.

Egy üres <div class="w-100"> a sor közepén új sort kezd, akkor is, ha még férne oszlop. (A régi példában két col-6 után amúgy is új sor kezdődött, így a w-100 hatása nem látszott.) Itt négy col-3 egy sorba férne, a w-100 mégis kettévágja őket.

Az order-1 … order-5 a megjelenítési sorrendet adja (a kisebb kerül előre), az order-first és order-last a legelejére és a végére tesz. Töréspontos változattal (order-md-1) csak egy bizonyos szélességtől rendezhetünk át. Az offset-md-4 4 oszlopnyi üres helyet hagy az oszlop előtt.

Egy oszlopon belül új .row kezdhető, amely ismét 12 egységre osztja az oszlop szélességét. Itt a belső sor mobilon 8 + 4, 576 px-től 6 + 6 arányban oszlik meg.

A .row flex konténer, ezért a flexbox-igazítás is működik rajta: a justify-content-* vízszintesen helyezi el a 12-nél kevesebb egységnyi oszlopokat, az align-items-* függőlegesen, ha a sor magasabb az oszlopoknál.

1. Híroldal: mobilon egy hasáb, tableten fő hír (8) + oldalsáv (4), laptopon fő hír (6) + két kisebb hír (3 + 3).
2. Termékrács: 1 / 2 / 3 / 4 termék egy sorban a négy töréspontnál (row-cols-* vagy col-*).
3. Vezérlőpult: oldalsáv mobilon a tartalom alatt, laptopon mellette balra (order-last order-lg-first).
4. Fotógaléria beágyazott sorokkal: egy nagy kép mellett négy kicsi 2 × 2-es rácsban.