Area di prova griglia Bootstrap
Crea layout responsive con la griglia Bootstrap 5.3 in modo visivo e copia le classi esatte — row, col, offset, ordine, spaziature e allineamento.
—
Tutto viene eseguito nel tuo browser — niente viene caricato.
Le classi che imposti si applicano a partire da questo breakpoint e oltre. Cambia breakpoint per creare layout responsive.
Informazioni su Area di prova griglia Bootstrap
Il Bootstrap Grid Playground costruisce layout responsivi a righe e colonne con il vero sistema a griglia di Bootstrap 5.3. Aggiungi fino a 12 colonne a una riga, clicca su qualsiasi colonna per impostarne larghezza, offset e ordine, e regola i gutter e l'allineamento sulla riga: l'anteprima e il markup generato si aggiornano in tempo reale a ogni modifica.
Poiché le griglie di Bootstrap sono mobile-first, il selettore di breakpoint è centrale: imposta una colonna a col-6 alla base e col-md-4 a md, e hai costruito il classico pattern impilato su mobile, a tre colonne su desktop senza scrivere una riga di codice. Offset, ordine e classi di gutter accettano tutti gli stessi infissi responsivi.
L'output è HTML pulito da copiare e incollare, un div di riga con i suoi figli colonna ed esattamente le classi che hai configurato. Copia l'intero snippet o solo le classi della riga; tutto funziona localmente nel tuo browser.
Come usare Area di prova griglia Bootstrap
- Aggiungi colonne alla riga, fino a 12, e clicca su una per selezionarla.
- Imposta lo span, l'offset e l'ordine della colonna selezionata per il breakpoint corrente.
- Cambia breakpoint (da sm a xxl) per definire come il layout si riorganizza su schermi più grandi.
- Regola i gutter della riga e le sue utility di allineamento.
- Esamina l'anteprima live, poi copia l'HTML generato o le classi della riga.