Bootstrap — Utilities · Marco Consiglio

📏 Spacing — margin e padding senza scrivere CSS

Le classi utility sostituiscono regole CSS scritte a mano (guida CSS Box Model) con nomi brevi e componibili: m per margin, p per padding, seguiti da una direzione e un valore numerico.

<div class="mt-3">margin-top</div> <div class="mb-4">margin-bottom</div> <div class="px-2">padding orizzontale</div> <div class="py-5">padding verticale</div>

Infisso	Lato
`t`	top (sopra)
`b`	bottom (sotto)
`s`	start (sinistra, o destra in lingue RTL)
`e`	end (destra, o sinistra in lingue RTL)
`x`	orizzontale (start + end insieme)
`y`	verticale (top + bottom insieme)
(nessuno)	tutti e 4 i lati

Anteprima: mt-2, mb-2, mt-4 in sequenza

mt-2 mb-2

mt-4

💡 Il valore numerico va da 0 a 5 (più auto per margin): ogni unità corrisponde a 0.25rem × il numero, quindi mt-3 = 1rem, mt-5 = 3rem — una scala fissa che garantisce coerenza visiva invece di valori arbitrari sparsi nel CSS.

🎨 Colori di testo e sfondo

<p class="text-primary">Testo primario</p> <p class="text-danger">Testo di errore</p> <div class="bg-success text-white p-3"> Sfondo verde, testo bianco </div>

Nome colore	Uso semantico tipico
`primary`	Colore principale del brand/tema
`secondary`	Colore secondario, meno enfatico
`success`	Verde — conferme, operazioni riuscite
`danger`	Rosso — errori, azioni distruttive
`warning`	Giallo — avvisi non bloccanti
`info`	Azzurro — informazioni neutre

💡 Gli stessi nomi semantici (primary, danger...) ricorrono in TUTTO Bootstrap: bottoni (btn-danger), alert (alert-danger), testo (text-danger), sfondi (bg-danger) — imparare questi 6-8 nomi permette di applicare coerenza cromatica ovunque nel framework.

👁️ Display — mostrare/nascondere elementi

<div class="d-none d-md-block"> Visibile solo da tablet in su </div> <div class="d-block d-md-none"> Visibile solo su mobile </div>

⚠️ d-none d-md-block significa "nascosto di default (d-none), MA mostrato come block da md in su (d-md-block)" — le classi si applicano da sinistra a destra seguendo la stessa logica mobile-first dei breakpoint della grid (guida Fondamenti): quella più specifica per il breakpoint attivo sovrascrive quella generica.

Classe	Valore CSS applicato
`d-none`	display: none
`d-block`	display: block
`d-flex`	display: flex
`d-inline`	display: inline

➡️ Flexbox helper — allineamento senza CSS custom

Queste utility applicano le proprietà flexbox già viste nella guida CSS Display/Flex/Grid, ma tramite classi invece di regole scritte a mano.

<div class="d-flex justify-content-between align-items-center"> <span>Elemento sinistra</span> <span>Elemento destra</span> </div>

Anteprima

Sinistra

Destra

Classe	Equivalente CSS
`justify-content-between`	justify-content: space-between
`justify-content-center`	justify-content: center
`align-items-center`	align-items: center
`flex-column`	flex-direction: column

✅ Questo è esattamente il pattern visto nella demo della navbar (guida Componenti UI): d-flex justify-content-between align-items-center è la combinazione più comune per "logo a sinistra, menu a destra, allineati verticalmente al centro".

🌙 Dark mode — tema scuro nativo

Da Bootstrap 5.3, il tema scuro è supportato nativamente tramite un attributo data-bs-theme, senza bisogno di scrivere CSS personalizzato per invertire i colori.

<html data-bs-theme="dark">  </html>  <div data-bs-theme="dark" class="p-4"> Questa sezione è scura, il resto della pagina resta chiaro </div>

Anteprima sezione data-bs-theme="dark"

Questa sezione usa il tema scuro nativo di Bootstrap.

💡 data-bs-theme può essere applicato sia all'intero <html> (tema scuro globale) sia a un singolo contenitore (tema scuro localizzato, es. una sidebar scura in una pagina altrimenti chiara) — Bootstrap adatta automaticamente colori di testo, sfondo e bordi dei componenti contenuti.

🧩 Applicazioni tipiche delle utility

Utility	Uso tipico
Spacing	Separare sezioni di pagina, allineare form, creare respiro tra card
Colori	Evidenziare stati (successo/errore) coerentemente in tutta l'applicazione
Display responsive	Mostrare una versione desktop della navigazione e una mobile semplificata
Flexbox helper	Navbar, toolbar, righe di azioni con pulsanti allineati
Dark mode	Preferenza utente per tema scuro, sezioni editor/codice con sfondo scuro

🎓 Esercitazioni pratiche

Toolbar con pulsanti allineati

Crea una barra con un titolo a sinistra e due pulsanti (Modifica/Elimina) a destra, usando d-flex justify-content-between align-items-center.

⏱ 15 min📦 1 file HTML💻 Individuale

Menu desktop/mobile alternativi

Crea due versioni dello stesso menu di navigazione: una visibile solo da tablet in su (d-none d-md-flex) e una visibile solo su mobile (d-flex d-md-none), verificando che non compaiano mai entrambe insieme.

⏱ 20 min📦 1 file HTML💻 Individuale

Sezione con tema scuro localizzato

Costruisci una pagina con tema chiaro generale, ma con una sidebar o footer che usa data-bs-theme="dark" solo su quella sezione specifica.

⏱ 20 min📦 1 file HTML💻 Individuale

Bootstrap — Utilities

Report Quiz

🎓 Attestato di Competenze sbloccato!