Bootstrap — Layout Avanzato

🪆 Grid nesting — una griglia dentro una colonna

Qualsiasi colonna (col-*) può contenere una NUOVA row con le proprie colonne, ripartendo il sistema a 12 al suo interno — utile per layout complessi come una sidebar con sotto-sezioni.

<div class="row"> <div class="col-8"> Colonna principale <div class="row"> <div class="col-6">Sotto-colonna A</div> <div class="col-6">Sotto-colonna B</div> </div> </div> <div class="col-4">Sidebar</div> </div>

Anteprima

col-8 (principale)

col-6

col-4 (sidebar)

💡 La riga annidata (nested row) è indipendente dalle 12 colonne della riga esterna: col-6 dentro col-8 significa "metà DELLO SPAZIO DISPONIBILE nella colonna principale", non metà dell'intera pagina.

↔️ Offset — spostare una colonna senza contenuto vuoto esplicito

offset-N lascia N colonne di spazio vuoto PRIMA di un elemento, senza dover creare un <div> vuoto per occupare quello spazio.

<div class="row"> <div class="col-6 offset-3"> Colonna centrata (6 di larghezza, 3 di spazio vuoto per lato) </div> </div>

Anteprima

col-6 offset-3

✅ col-6 offset-3 è il modo più comune per CENTRARE una colonna: 3 (vuoto) + 6 (contenuto) + 3 (vuoto, implicito) = 12, con il contenuto perfettamente al centro.

🔀 Order — cambiare l'ordine visivo senza toccare l'HTML

order-N permette di mostrare gli elementi in un ordine visivo diverso da quello scritto nel markup HTML — utile per mostrare un contenuto "prima" su mobile pur restando "dopo" nel codice sorgente (importante per l'ordine di lettura degli screen reader).

<div class="row"> <div class="col-6 order-2 order-md-1"> Nel codice è il primo, ma appare per secondo su mobile </div> <div class="col-6 order-1 order-md-2"> Nel codice è il secondo, ma appare per primo su mobile </div> </div>

⚠️ order cambia solo l'ordine VISIVO, non l'ordine nel DOM: uno screen reader continuerà a leggere gli elementi nell'ordine del codice HTML, non nell'ordine visivo — usare order con attenzione quando l'ordine di lettura logico è importante per l'accessibilità.

📦 Container-fluid per breakpoint — via di mezzo tra container e container-fluid

La guida Fondamenti ha introdotto container (larghezza massima fissa) e container-fluid (sempre 100%); esiste una terza famiglia intermedia.

Classe	Comportamento
`container-sm`	Fluido sotto 576px, larghezza fissa sopra
`container-md`	Fluido sotto 768px, larghezza fissa sopra
`container-lg`	Fluido sotto 992px, larghezza fissa sopra
`container-xl`	Fluido sotto 1200px, larghezza fissa sopra

💡 Utile quando si vuole che il contenuto occupi tutto lo schermo su dispositivi piccoli/medi (dove lo spazio è prezioso), ma abbia una larghezza massima leggibile solo su schermi grandi.

⚙️ Personalizzare i breakpoint — nozioni di base con Sass

I breakpoint standard (sm/md/lg/xl, guida Fondamenti) sono definiti in variabili Sass che Bootstrap usa per generare tutte le classi responsive — modificarli richiede di ricompilare Bootstrap da sorgente Sass invece di usare il CSS precompilato via CDN.

// file _variables.scss personalizzato, PRIMA di importare Bootstrap $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px // valore di default, modificabile qui ); // poi, nello stesso file: @import "bootstrap/scss/bootstrap";

⚠️ Questo approccio richiede un ambiente di build (Node.js + Sass compiler, tipicamente tramite npm), non è possibile personalizzare i breakpoint usando solo il CSS precompilato via CDN — è la differenza pratica più importante tra i due metodi di installazione visti nella guida Fondamenti.

💡 Per la maggior parte dei progetti didattici o prototipi rapidi, i breakpoint standard sono più che sufficienti — la personalizzazione via Sass è una tecnica per progetti più maturi con esigenze di design specifiche.

🧩 Applicazioni tipiche del layout avanzato

Tecnica	Uso tipico
Grid nesting	Sidebar con sotto-sezioni, card con contenuto interno a più colonne
Offset	Centrare form di login/registrazione, blocchi di testo editoriali
Order	Mostrare l'immagine prima del testo su mobile ma dopo su desktop, o viceversa
Container-{bp}	Landing page che sfrutta tutto lo schermo su tablet ma resta leggibile su monitor grandi
Breakpoint custom	Progetti con design system aziendale che richiede soglie responsive specifiche

🎓 Esercitazioni pratiche

Layout a 2 colonne con sidebar annidata

Crea una riga con una colonna principale (col-8) contenente una griglia annidata a 2 colonne, e una sidebar (col-4) semplice.

⏱ 25 min📦 1 file HTML💻 Individuale

Form di login centrato con offset

Costruisci un form di login in una colonna col-6 offset-3, verificando che appaia perfettamente centrato orizzontalmente nella pagina.

⏱ 15 min📦 1 file HTML💻 Individuale

Sezione con ordine invertito su mobile

Crea una sezione con immagine e testo affiancati; usa le classi order per mostrare l'immagine sopra il testo su mobile, ma il testo a sinistra dell'immagine su desktop.

⏱ 20 min📦 1 file HTML💻 Individuale

Bootstrap — Layout Avanzato

Report Quiz

🎓 Attestato di Competenze sbloccato!