Utility osztályok.

A utility (segéd-) osztály egyetlen CSS-tulajdonságot állít be: a mt-3 csak a felső margót, a text-center csak a szöveg igazítását. Ezekből rakható össze a legtöbb elrendezés saját CSS nélkül.

• a térköz-osztályok elnevezése és mérete
• szöveg- és háttérszínek
• flex-elrendezés osztályokkal
• pozíció, megjelenítés, szegély, árnyék, méret

A térköz-osztály neve három részből áll: mit – melyik oldalon – mennyit.

Példák: mt-3 = felső margó 16 px; px-4 = bal és jobb belső margó 24 px; mb-0 = nincs alsó margó. A margó átlátszó, ezért a lenti ablakban a Térközök mutatása kapcsoló színezi ki: narancs a margó, zöld a belső margó, a számok pixelben.

Figyeld meg: a margó a doboz körül foglal helyet (eltolja az előző és következő elemet, és a szaggatott szülő szélét), a belső margó a doboz belsejében – a kék háttér ide is kiterjed. A mx-auto egy megadott szélességű blokkot vízszintesen középre tesz, az ms-auto jobbra tolja (a bal margó elnyeli a maradék helyet).

• m-2 mind a négy oldalon 8 px
• mt-3 csak fent
• mb-4 csak lent: a sor magasabb lesz tőle
• ms-auto a maradék hely a bal margóba kerül
• gap-3 az elemek közti hézag (nem margó!)

A text-* a szöveg, a bg-* a háttér színét adja a nyolc színszerep valamelyikével. A text-bg-* egyszerre állítja a hátteret és hozzá az olvasható szövegszínt, a bg-*-subtle halvány hátteret ad (hozzá illő szöveg: text-*-emphasis).

A d-flex flex konténerré teszi az elemet; a gyerekek alapból egy sorba kerülnek (flex-row), a flex-column egymás alá rendezi őket. A justify-content-* a fő tengelyen (sorban: vízszintesen), az align-items-* a kereszttengelyen (sorban: függőlegesen) igazít. A flexbox működését részletesen a CSS műhely 8. témája mutatja be.

• d-flex
• flex-row / flex-column
• justify-content-*: start, center, end, between, around, evenly
• align-items-*: stretch, start, center, end, baseline
• flex-wrap, gap-*

A position-relative szülőn belül a position-absolute elemeket a top-0/top-50/top-100, bottom-*, start-* (bal) és end-* (jobb) osztállyal helyezzük el; a translate-middle az elemet a saját méretének felével visszahúzza, így pontosan középre kerül. Az start/end elnevezés azért nem left/right, mert jobbról balra író nyelvekben megfordul.

A d-none, d-inline, d-block, d-flex a display tulajdonságot állítja. Töréspontos változatuk (d-md-block) csak az adott szélességtől hat – így lehet egy elemet kis képernyőn elrejteni. A példa mobilnézetben indul: a kék sáv itt nem látszik; váltsd át Tabletre!

A border mind a négy oldalra tesz szegélyt, a border-top … border-start csak egy oldalra; a színt a border-primary stb. adja. A rounded, rounded-3, rounded-pill, rounded-circle a sarkokat kerekíti, a shadow-sm, shadow, shadow-lg árnyékot ad.

A w-25, w-50, w-75, w-100 a szülő szélességének 25–100%-át adja (a h-* ugyanez magasságra, ha a szülőnek van magassága). A ratio ratio-16x9 doboz a szélességéből számolja a magasságát – videók és térképek beágyazásához ideális.

1. Készíts kártyát csak utility osztályokkal (saját CSS nélkül): bg-white border rounded-3 shadow-sm p-4, benne cím, szöveg, jobbra igazított gomb (d-flex justify-content-end).
2. Készíts navigációs sávot d-flex-szel: logó balra, menüpontok jobbra (ms-auto), egyenletes hézaggal (gap-3).
3. Rejts el egy oldalsávot mobilon (d-none d-lg-block), és mutass helyette egy gombot (d-lg-none).
4. Írd le, mekkora a teljes helyfoglalása egy p-3 m-2 border doboznak, ha a tartalma 100 px széles (100 + 2·16 + 2·1 + 2·8 = 150 px).