Costruisci siti responsive e moderni da zero: griglia a 12 colonne, componenti pronti, form e utility. Con editor live per provare ogni esempio sul momento.
Cos'è Bootstrap 5
Bootstrap è il framework CSS gratuito e open-source più popolare al mondo per costruire siti web responsive (che si adattano a ogni schermo) e moderni in modo rapidissimo. Invece di scrivere CSS da zero, usi classi già pronte.
Perché usarlo
⚡ Velocità: componenti pronti (bottoni, card, navbar, modali) con una riga di HTML
📱 Responsive: il sistema a griglia adatta il layout a telefono, tablet e desktop
🎨 Coerenza: tutto ha uno stile uniforme e professionale
🌍 Compatibilità: funziona su tutti i browser moderni
Bootstrap 5 è l'ultima versione: non richiede più jQuery e usa il vanilla JavaScript. Tutto ciò che ti serve per partire è un linguaggio che già puoi imparare qui: HTML e un po' di CSS.
Il tuo primo componente Bootstrap
📘 Premi ▶ Provalo tu su ogni esempio: l'editor è già collegato a Bootstrap 5, quindi vedi subito il risultato renderizzato e puoi modificarlo dal vivo.
Iniziare con Bootstrap 5
Per usare Bootstrap basta includere due file dal CDN (una rete che li serve gratis e velocemente): il CSS nell'<head> e il JavaScript (il "bundle") appena prima di </body>.
Pagina Bootstrap minima
Il template completo (per il tuo file .html)
Quando crei un file vero sul tuo computer, parti da questa struttura:
💡 Il meta viewport è essenziale: senza, il responsive non funziona sui telefoni.
I container
Il container è l'elemento base che centra e dà margini al contenuto. Quasi ogni layout Bootstrap inizia con un container.
.container — larghezza fissa che cambia a scatti secondo lo schermo
.container-fluid — larghezza piena al 100% sempre
Container fisso vs fluido
📘 Esistono anche container responsive come .container-sm, .container-md: diventano a larghezza piena finché lo schermo non raggiunge quel breakpoint.
La griglia: le basi
Il sistema a griglia divide la pagina in 12 colonne. Metti le colonne dentro una .row, dentro un .container. Le colonne si dispongono affiancate e vanno a capo da sole sugli schermi piccoli.
Tre colonne uguali
Larghezze diverse (somma = 12)
💡 Regola d'oro: le colonne di una riga dovrebbero sommare a 12. .col senza numero divide lo spazio in parti uguali.
La tipografia
Bootstrap definisce stili tipografici puliti e classi pronte per titoli, paragrafi in evidenza e testo display di grande impatto.
Titoli, lead e display
I colori contestuali
Bootstrap fornisce una palette di colori contestuali applicabili al testo (text-*) e allo sfondo (bg-*): primary, secondary, success, danger, warning, info, light, dark.
Testo e sfondi colorati
📘 Ogni colore ha un significato: success (verde) per conferme, danger (rosso) per errori, warning (giallo) per avvisi. Usali in modo coerente.
Le tabelle
La classe .table rende una tabella pulita e moderna. Aggiungi modificatori per righe a zebra, bordi ed effetto hover.
Tabella a strisce con hover
Le immagini
Bootstrap rende le immagini responsive e ben rifinite: .img-fluid le scala con il contenitore, .rounded e .img-thumbnail le rifiniscono.
Immagini con stili diversi
💡 .img-fluid equivale a max-width:100%; height:auto: l'immagine non sfora mai il suo contenitore.
Jumbotron (hero)
In Bootstrap 5 il vecchio componente jumbotron è stato rimosso, ma si ricrea facilmente con le utility per ottenere un grande riquadro di presentazione ("hero").
Un hero con le utility
Gli alert
Gli alert mostrano messaggi contestuali. Usa .alert con un colore, e rendili chiudibili con .alert-dismissible e un bottone di chiusura.
Alert colorati e chiudibile
I bottoni
I bottoni usano .btn più un colore. Esistono varianti outline, dimensioni e stato disabilitato.
Stili, outline e dimensioni
I gruppi di bottoni
Raggruppa più bottoni in un'unica barra con .btn-group.
Gruppo orizzontale e verticale
I badge
I badge sono piccole etichette, utili per contatori e stati. Usa .badge con uno sfondo colorato.
Badge e badge a pillola
Le barre di avanzamento
La barra di avanzamento (.progress + .progress-bar) mostra il completamento di un'operazione. La larghezza si imposta con uno stile inline.
Barre semplici e a strisce
Gli spinner
Gli spinner indicano un caricamento in corso, con .spinner-border o .spinner-grow.
Spinner di caricamento
La paginazione
La paginazione (.pagination) divide contenuti lunghi in pagine numerate.
Barra di paginazione
I list group
I list group (.list-group) mostrano elenchi flessibili: voci attive, disabilitate, con badge o cliccabili.
Elenco con voce attiva e badge
Le card
La card è un contenitore flessibile per raggruppare contenuti: titolo, testo, immagini e bottoni in un riquadro pulito.
Una card completa
I menu a tendina
I dropdown sono menu a tendina cliccabili. Funzionano grazie al bundle JavaScript di Bootstrap (già incluso nell'editor) con gli attributi data-bs-toggle.
Menu a tendina
Il collapse
Il collapse mostra/nasconde contenuto con un click: utile per FAQ e sezioni pieghevoli. La versione a gruppo si chiama accordion.
Contenuto pieghevole
I nav (tab e pill)
I componenti nav creano menu di navigazione come tab (.nav-tabs) o pill (.nav-pills).
Tab e pill
La navbar
La navbar è la barra di navigazione principale: responsive, si comprime in un menu "hamburger" sugli schermi piccoli. Provala e restringi l'anteprima!
Navbar responsive
Il carousel
Il carousel è uno slideshow di contenuti che scorrono automaticamente. Qui usiamo riquadri colorati al posto delle immagini.
Slideshow automatico
Le finestre modali
Il modal è una finestra di dialogo che appare sopra la pagina. Si apre con un bottone che punta al suo id.
Finestra modale
I tooltip
Il tooltip mostra un suggerimento al passaggio del mouse. Nell'editor l'inizializzazione è automatica: ti basta l'attributo data-bs-toggle="tooltip".
Suggerimenti al passaggio del mouse
📘 Nel tuo file vero i tooltip vanno attivati con JavaScript: new bootstrap.Tooltip(elemento) per ogni elemento.
I popover
Il popover è come un tooltip più grande, che appare al click e può contenere un titolo e più testo. Anche qui l'init è automatico nell'editor.
Popover al click
I toast
I toast sono notifiche leggere che compaiono e svaniscono, come quelle dei sistemi operativi. Qui lo mostriamo già visibile con la classe .show.
Notifica toast
Lo scrollspy
Lo scrollspy aggiorna automaticamente la voce di menu attiva mentre scorri la pagina. Si attiva con data-bs-spy="scroll".
Navigazione che segue lo scroll
L'offcanvas
L'offcanvas è un pannello laterale che scivola dentro lo schermo: perfetto per menu mobile e filtri.
Pannello laterale
Le classi utility
Le utility sono micro-classi che applicano una sola proprietà CSS: spaziature, bordi, ombre, allineamenti. Sono il segreto della velocità di Bootstrap.
Spaziature, bordi e ombre
📘 Le spaziature seguono lo schema {proprieta}{lato}-{valore}: es. mt-3 = margin-top livello 3, px-2 = padding orizzontale livello 2 (valori da 0 a 5).
La modalità scura
Bootstrap 5.3 ha introdotto il dark mode nativo: basta l'attributo data-bs-theme="dark" su un elemento per applicarvi il tema scuro.
Un riquadro in dark mode
💡 Puoi applicare data-bs-theme="dark" all'intero <html> per mettere tutto il sito in modalità scura.
Le utility flexbox
Con .d-flex e le sue utility controlli direzione, allineamento e distribuzione degli elementi senza scrivere CSS: è Flexbox reso semplice.
Allineare e distribuire
I form
Bootstrap rende i moduli puliti e coerenti. La classe chiave è .form-control per i campi di testo, abbinata a .form-label per le etichette.
Un form di base
I menu select
I menu a discesa di selezione usano .form-select.
Menu di selezione
Checkbox e radio
Caselle di spunta e pulsanti di opzione usano .form-check. Le versioni .form-switch diventano interruttori.
Checkbox, radio e switch
Il cursore range
Il cursore scorrevole usa .form-range.
Cursore scorrevole
Gli input group
Gli input group aggiungono testo o bottoni accanto a un campo, con .input-group e .input-group-text.
Campi con prefisso e suffisso
Le etichette flottanti
Le floating label (.form-floating) mostrano l'etichetta dentro il campo, che "sale" quando scrivi: un effetto moderno ed elegante.
Etichette che salgono
La validazione dei form
Bootstrap stila gli stati di validità con .is-valid e .is-invalid, mostrando messaggi di conferma o errore.
Campi validi e non validi
Il sistema a griglia
La griglia di Bootstrap si basa su 12 colonne e su sei breakpoint che corrispondono alle dimensioni dello schermo. Le classi col-{breakpoint}-{numero} definiscono quante colonne occupare da quella dimensione in su.
Classe
Prefisso
Si attiva da
Extra small
.col-
<576px (telefoni)
Small
.col-sm-
≥576px
Medium
.col-md-
≥768px (tablet)
Large
.col-lg-
≥992px
Extra large
.col-xl-
≥1200px
XXL
.col-xxl-
≥1400px
💡 È mobile-first: una classe vale da quel breakpoint in su. Restringi e allarga l'anteprima negli esempi seguenti per vedere il layout cambiare.
Impilato e orizzontale
Combinando un breakpoint puoi rendere le colonne impilate (una sotto l'altra) sui telefoni e orizzontali da una certa dimensione in su.
Impilate sotto md, affiancate sopra
Griglia Extra Small
Le classi .col- (senza breakpoint) valgono su tutti gli schermi, anche i più piccoli: le colonne restano sempre affiancate.
Sempre affiancate
Griglia Small
.col-sm-* si attiva da 576px in su: sotto, le colonne si impilano.
col-sm in azione
Griglia Medium
.col-md-* si attiva da 768px in su: ideale per il passaggio tablet/desktop.
Layout a 3 colonne da md
Griglia Large
.col-lg-* si attiva da 992px in su: tipico dei layout desktop.
col-lg in azione
Griglia Extra Large
.col-xl-* si attiva da 1200px in su: per schermi ampi.
col-xl in azione
Griglia XXL
.col-xxl-* si attiva da 1400px in su: pensata per i monitor molto grandi.
col-xxl in azione
Esempi di griglia
La forza della griglia sta nel combinare più breakpoint sullo stesso elemento per layout che si trasformano a ogni dimensione.
Layout responsive completo
📘 col-12 col-md-8 significa: occupa 12 colonne (tutta la larghezza) sui telefoni, e 8 colonne da tablet in su. Una sola riga di classi, infiniti adattamenti.
Certificazione Bootstrap
Una certificazione su Bootstrap attesta la tua capacità di costruire interfacce responsive e professionali in tempi rapidi: un buon biglietto da visita, soprattutto unito a un portfolio di progetti reali.
Certificazione
Ente
Note
Bootstrap Certificate
W3Schools
Base, ottima per il CV
Front End Certificate
W3Schools / freeCodeCamp
Bootstrap + HTML/CSS/JS
Il tuo portfolio
—
Progetti pubblicati valgono piu' di ogni badge
Come prepararsi
📐 Padroneggia la griglia a 12 colonne e i breakpoint responsive
🧩 Conosci i componenti principali: navbar, card, modal, form
🛠️ Sai personalizzare con le utility senza scrivere CSS
🟩 Pubblica i tuoi progetti su GitHub con GitHub Pages
Il template di base
Ecco un template completo e responsive che combina navbar, hero, griglia e card: un'ottima base di partenza per qualsiasi sito. Provalo e modificalo!
Mini-sito responsive completo
L'editor Bootstrap online
Ogni esempio di questo corso ha il pulsante ▶ Provalo tu: apre un editor con anteprima dal vivo già collegato a Bootstrap 5. Scrivi a sinistra, vedi il risultato a destra in tempo reale.
Esercizi pratici progressivi. Svolgili nell'editor Provalo tu o in un file sul tuo computer.
Livello base
Crea tre bottoni di colori diversi e tre dimensioni diverse
Costruisci una tabella a strisce con bordi e intestazione scura
Crea un alert di successo chiudibile
Disponi tre colonne uguali dentro un container
Livello intermedio
Realizza una card con immagine, titolo, testo e bottone
Crea un form con nome, email, select e checkbox
Costruisci una navbar responsive con menu hamburger
Fai un layout a due colonne (8+4) che si impila sui telefoni
Livello avanzato
Crea un modal che si apre da un bottone
Costruisci un carousel con tre slide colorate
Realizza una pagina con navbar, hero, griglia di card e footer
Aggiungi la modalità scura con data-bs-theme
🎯 Sfida
Ricrea la home page di un'attività locale (bar, palestra, negozio) usando solo Bootstrap: navbar, hero con call-to-action, tre card di servizi, un form di contatto e un footer. Deve essere perfettamente responsive su telefono e desktop.
Quiz Bootstrap
Verifica le tue conoscenze. Le risposte sono in fondo.
In quante colonne è divisa la griglia di Bootstrap?
Qual è la differenza tra .container e .container-fluid?
Quale classe rende un'immagine responsive?
Cosa significa che la griglia è "mobile-first"?
Da quale larghezza si attiva .col-md-*?
Quale attributo apre un modal?
Bootstrap 5 richiede jQuery?
Quale classe crea un bottone con solo il bordo colorato?
Come si imposta la modalità scura su un elemento?
Cosa fa la classe mt-3?
📘 Risposte: 1) 12 colonne. 2) container ha larghezza limitata e centrata, container-fluid è sempre al 100%. 3) .img-fluid. 4) Le classi valgono da un breakpoint in su; si progetta prima per il mobile. 5) Da 768px in su. 6) data-bs-toggle="modal" con data-bs-target. 7) No, usa JavaScript vanilla. 8) .btn-outline-*. 9) Con data-bs-theme="dark". 10) Aggiunge un margine superiore (margin-top) di livello 3.
Programma del corso
La mappa completa di tutto ciò che copre questo corso, dalle basi ai componenti avanzati.
Progetto finale: un sito responsive completo da zero
💡 Il segreto: da subito ricostruisci con Bootstrap siti che conosci (una landing page, un blog). Riconoscere i componenti "nel mondo reale" accelera moltissimo l'apprendimento.
Domande da colloquio
Bootstrap compare spesso nei colloqui per ruoli front-end. Queste sono le domande più frequenti.
🔹 Come funziona il sistema a griglia di Bootstrap?
🔹 Cosa significa "mobile-first" e come si applica con i breakpoint?
🔹 Differenza tra .container e .container-fluid
🔹 Come rendi un layout responsive con una sola serie di classi?
🔹 Quali vantaggi e svantaggi ha usare Bootstrap rispetto al CSS scritto a mano?
🔹 Come personalizzi Bootstrap senza rompere gli aggiornamenti?
🔹 Cosa è cambiato tra Bootstrap 4 e 5?
🔹 Come funzionano i componenti JavaScript (modal, dropdown) in Bootstrap 5?
💡 Punto chiave da citare al colloquio: Bootstrap fa risparmiare tempo e garantisce coerenza, ma va personalizzato per non avere lo "stesso aspetto di tutti gli altri siti". Dimostrare di saperlo adattare fa la differenza.
Conclusione — E ora?
Hai completato il corso Bootstrap 5! Ora sai costruire siti responsive e professionali in una frazione del tempo: griglia, componenti, form, utility e dark mode non hanno più segreti.
I tuoi prossimi passi
🎨 Personalizza Bootstrap con le variabili CSS e i tuoi colori, per un'identità unica
⚛️ Integra Bootstrap con React per interfacce dinamiche
🧠 Rinforza le basi con i corsi HTML e CSS per capire cosa fa Bootstrap "sotto il cofano"
🎯 La tua sfida finale
Costruisci il tuo sito portfolio completo con Bootstrap: navbar fissa, sezione hero, griglia di progetti con card, una sezione "chi sono", un form di contatto e un footer. Rendilo perfettamente responsive, aggiungi la modalità scura e pubblicalo online con GitHub Pages. Sarà il tuo biglietto da visita da sviluppatore front-end.
