Bootstrap — Componenti UI

Navbar · Card · Modal · Carousel · Alert · Badge · Bootstrap 5.3 · Marco Consiglio
Volta Institute · Napoli
A.A. 2026
🧭 Navbar — la barra di navigazione
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">Marchio</a> <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Chi siamo</a></li> </ul> </div> </div> </nav>
Anteprima
Marchio
HomeChi siamo
💡 navbar-expand-lg determina DA QUALE breakpoint il menu diventa orizzontale (sotto quel breakpoint, si comprime nell'icona hamburger); data-bs-toggle/data-bs-target sono attributi che Bootstrap JS legge per gestire l'apertura/chiusura del menu su mobile, senza scrivere JavaScript personalizzato.
🃏 Card — il blocco contenuto più usato
<div class="card" style="width: 18rem;"> <img src="copertina.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title">Titolo card</h5> <p class="card-text">Testo descrittivo breve.</p> <a href="#" class="btn btn-primary">Scopri di più</a> </div> </div>
Anteprima
Titolo card
Testo descrittivo breve.
✅ Le card sono l'elemento più versatile di Bootstrap: combinate con la grid del modulo Fondamenti (col-md-4 per card), formano il pattern "griglia di prodotti/articoli" più comune del web.
🪟 Modal — finestra sovrapposta al contenuto
<button data-bs-toggle="modal" data-bs-target="#mioModal" class="btn btn-primary"> Apri finestra </button> <div class="modal" id="mioModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Titolo</h5> <button data-bs-dismiss="modal" class="btn-close"></button> </div> <div class="modal-body">Contenuto della finestra.</div> </div> </div> </div>
⚠️ Il modal richiede il file JS di Bootstrap caricato correttamente (vedi guida Fondamenti, Passo 2 del setup) — senza JS, cliccare sul pulsante non apre nulla, perché è lo script a leggere gli attributi data-bs-toggle/data-bs-target e gestire l'apertura.
💡 data-bs-dismiss="modal" sul pulsante di chiusura fa esattamente l'inverso: chiude il modal più vicino nella gerarchia HTML, senza bisogno di specificarne l'id.
🎠 Carousel — slide che ruotano automaticamente
<div id="mioCarosello" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="slide1.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="slide2.jpg" class="d-block w-100"> </div> </div> <button class="carousel-control-prev" data-bs-target="#mioCarosello" data-bs-slide="prev"></button> <button class="carousel-control-next" data-bs-target="#mioCarosello" data-bs-slide="next"></button> </div>
⚠️ Esattamente UNA slide deve avere la classe active fin dall'inizio (tipicamente la prima) — senza di essa, il carosello parte vuoto e nessuna slide viene mostrata all'apertura della pagina.
💡 data-bs-ride="carousel" attiva la rotazione automatica delle slide; se omesso, il carosello resta fermo finché l'utente non clicca manualmente sui controlli prev/next.
⚠️ Alert — messaggi di stato
<div class="alert alert-danger"> Errore: campo obbligatorio mancante. </div>
Anteprima
Errore: campo obbligatorio mancante.
VarianteUso tipico
alert-successOperazione completata con successo (sfondo verde)
alert-dangerErrore bloccante (sfondo rosso)
alert-warningAvviso non bloccante (sfondo giallo)
alert-infoInformazione neutra (sfondo azzurro)
🏷️ Badge — piccole etichette numeriche o di stato
<span class="badge bg-primary">Nuovo</span> <button class="btn btn-primary"> Notifiche <span class="badge bg-light text-dark">4</span> </button>
Anteprima
Nuovo
✅ I badge dentro un bottone (come nell'esempio "Notifiche 4") sono il pattern classico per contatori — combinano un elemento interattivo con un'etichetta informativa senza JavaScript aggiuntivo.
🧩 Applicazioni tipiche dei componenti UI
ComponenteUso tipico
NavbarHeader di qualsiasi sito multi-pagina, spesso con logo + menu + pulsante CTA
CardGriglie di prodotti, articoli blog, profili team — combinata con la grid Bootstrap
ModalForm di login/registrazione, conferme di eliminazione, anteprima immagine ingrandita
CarouselHero banner con più immagini promozionali, gallerie prodotto
AlertFeedback dopo l'invio di un form (successo/errore), banner di avviso cookie
🎓 Esercitazioni pratiche
1
Navbar responsive con menu hamburger
Costruisci una navbar completa con logo, 3 voci di menu e un pulsante CTA a destra, verificando che si comprima correttamente nell'icona hamburger su schermi piccoli.
⏱ 25 min📦 1 file HTML💻 Individuale
2
Griglia di 6 card prodotto
Combina card e sistema di grid (guida Fondamenti) per creare una griglia di 6 prodotti, 3 per riga su desktop, 1 per riga su mobile.
⏱ 30 min📦 1 file HTML💻 Individuale
3
Modal di conferma eliminazione
Crea un pulsante "Elimina" che apre un modal di conferma con due pulsanti (Annulla/Conferma), usando data-bs-dismiss per la chiusura.
⏱ 20 min📦 1 file HTML💻 Individuale
Marco Consiglio · Volta Institute · 2026