Bootstrap — Fondamenti · Marco Consiglio

🗺️ Cos'è Bootstrap — un framework CSS pronto all'uso

Bootstrap è un framework CSS (con componenti JavaScript) che fornisce classi predefinite per costruire layout responsive senza scrivere CSS da zero — al posto di definire manualmente display: flex e le percentuali di larghezza (guida CSS Display/Flex/Grid), si applicano classi come row e col-6 direttamente nell'HTML.

Rispetto al CSS "puro" scritto nelle guide precedenti del percorso, Bootstrap scambia flessibilità totale per velocità di sviluppo: è la scelta tipica quando serve un sito o un pannello funzionante rapidamente, con un aspetto professionale coerente.

⚙️ Includere Bootstrap — via CDN (il modo più rapido)

💡 Il file CSS va nell'<head>, il file JS va appena prima della chiusura di </body> — questo ordine garantisce che la pagina sia già stilizzata quando appare, e che gli elementi HTML esistano già quando lo script JavaScript li cerca.

📦 Setup checklist

Passo	Azione
1	Aggiungere il link CSS di Bootstrap nell'`<head>`
2	Aggiungere lo script JS bundle prima di `</body>`
3	Aggiungere `<meta name="viewport" content="width=device-width, initial-scale=1">` per il comportamento responsive corretto su mobile
4	Wrappare il contenuto in un `container` o `container-fluid`

⚠️ Dimenticare il meta viewport è un errore comune: senza di esso, il sistema di grid responsive di Bootstrap non si comporta correttamente su dispositivi mobili, anche se tutto il resto è configurato correttamente.

📦 Container — il contenitore che centra e limita la larghezza

Classe	Comportamento
`container`	Larghezza massima diversa per ogni breakpoint (es. 540px su sm, 720px su md, 960px su lg...), centrato
`container-fluid`	Sempre 100% della larghezza del viewport, nessun limite massimo
`container-{breakpoint}`	Es. `container-md`: fluido sotto quel breakpoint, con larghezza massima fissa sopra

💡 container è la scelta predefinita per contenuti editoriali (blog, landing page) dove si vuole una larghezza massima leggibile; container-fluid è tipico di dashboard e pannelli applicativi dove si vuole sfruttare tutto lo schermo.

🔢 Il sistema di grid a 12 colonne

Ogni riga (row) è divisa in 12 colonne virtuali; assegnare col-4 a un elemento significa "occupa 4 delle 12 colonne", cioè un terzo della larghezza — lo stesso principio del display: grid con grid-template-columns già visto nella guida CSS dedicata, ma con classi pronte invece di scrivere le regole CSS.

<div class="row"> <div class="col-4">Un terzo</div> <div class="col-4">Un terzo</div> <div class="col-4">Un terzo</div> </div>

Anteprima

col-4

Anteprima

col-6

✅ Il totale delle colonne in una riga dovrebbe sommare a 12 (o un suo divisore, ripetuto): col-4 × 3 = 12, col-6 × 2 = 12 — se supera 12, le colonne in eccesso "vanno a capo" automaticamente sulla riga successiva.

📱 Breakpoint — colonne che cambiano in base alla larghezza schermo

Bootstrap definisce breakpoint standard (simili alle media query già viste nella guida CSS Responsive) tramite infissi nel nome della classe: col-{breakpoint}-{numero}.

Infisso	Larghezza minima	Dispositivo tipico
`col-` (nessuno)	0px (sempre attivo)	Tutti, come base
`col-sm-`	576px	Telefoni in orizzontale
`col-md-`	768px	Tablet
`col-lg-`	992px	Laptop
`col-xl-`	1200px	Desktop

<div class="row"> <div class="col-12 col-md-6 col-lg-4"> Colonna adattiva </div> </div>

💡 Questa colonna occupa TUTTA la larghezza su mobile (col-12), metà su tablet (col-md-6), un terzo su desktop (col-lg-4) — più classi possono coesistere sullo stesso elemento, ciascuna attiva dal proprio breakpoint in su ("mobile-first": la classe senza infisso è la base, le altre la sovrascrivono a schermi più larghi).

🧩 Applicazioni tipiche di Bootstrap

Tipologia	Uso tipico
Dashboard amministrativa	Layout a colonne con sidebar (spesso `container-fluid`), card per widget di stato
Landing page	`container` centrato, sezioni con grid a 12 colonne per hero/features/testimonianze
Prototipo rapido	Bootstrap via CDN senza build step, per validare un layout prima di scrivere CSS personalizzato
Form multi-colonna	Campi affiancati con `row`/`col`, responsive su mobile con impilamento automatico

📘 Glossario interattivo — tocca un termine per la definizione

Breakpoint

Una larghezza di schermo soglia (es. 768px) oltre la quale il layout cambia comportamento — sotto quella soglia si applica uno stile, sopra un altro.

Container

Elemento che racchiude il contenuto della pagina, centrandolo e limitandone (o meno, con container-fluid) la larghezza massima.

Mobile-first

Approccio di design dove lo stile base è pensato per schermi piccoli, poi arricchito progressivamente per schermi più grandi tramite breakpoint — il contrario di partire dal desktop e "adattare" al mobile.

Row / Col

row è il contenitore di una riga della grid; col (o col-N) è ciascuna colonna al suo interno — insieme implementano il sistema a 12 colonne senza scrivere CSS flexbox manualmente.

CDN

Content Delivery Network: rete di server che ospitano file (come Bootstrap CSS/JS) pronti da collegare via link/script senza doverli scaricare o installare localmente.

🎓 Esercitazioni pratiche

Costruisci una griglia a 3 colonne responsive

Crea una riga con 3 card affiancate su desktop (col-lg-4), 2 per riga su tablet (col-md-6), impilate su mobile (col-12), includendo il meta viewport e il link CDN corretto.

⏱ 25 min📦 1 file HTML💻 Individuale

Confronta container e container-fluid

Crea due sezioni identiche, una con container e una con container-fluid, e osserva la differenza di comportamento ridimensionando la finestra del browser.

⏱ 15 min📦 1 file HTML💻 Individuale

Layout con colonne di larghezza diseguale

Costruisci una riga con una colonna principale (col-8) e una sidebar (col-4), poi rendila impilata su schermi piccoli con le classi breakpoint appropriate.

⏱ 20 min📦 1 file HTML💻 Individuale

Bootstrap — Fondamenti

Report Quiz

🎓 Attestato di Competenze sbloccato!