Playground flex di Bootstrap
Crea layout flex di Bootstrap 5.3 in modo visivo e copia le classi di utilità esatte: d-flex, justify-content, align-items, order, grow e altro ancora.
—
Tutto viene eseguito nel tuo browser: nulla viene caricato.
Le classi che imposti si applicano da questo breakpoint in su. Cambia breakpoint per creare layout responsivi.
Informazioni su Playground flex di Bootstrap
Il Bootstrap Flex Playground ti permette di costruire layout flexbox con vere classi utility di Bootstrap 5.3 invece di CSS grezzo. Configura il contenitore, direzione, wrapping, justify-content, align-items, gap, con controlli segmentati, clicca su qualsiasi elemento per impostare le sue utility di align-self, order, grow e shrink, e guarda l'anteprima live riorganizzarsi istantaneamente.
Il selettore di breakpoint è ciò che lo rende più di un giocattolo: scegli sm, md, lg, xl o xxl e le classi che imposti da quel punto in poi ottengono l'infisso responsivo, justify-content-md-between, flex-lg-row, esattamente come il sistema mobile-first di Bootstrap le applica da quel breakpoint in su. Aggiungi fino a 12 elementi per simulare un componente realistico.
Quando il layout appare corretto, copia l'HTML generato o solo le classi del contenitore e incollale direttamente nel tuo progetto. Tutto funziona nel tuo browser e nulla viene caricato.
Come usare Playground flex di Bootstrap
- Imposta le utility del contenitore, direzione, wrap, justify-content, align-items e gap, con i controlli segmentati.
- Aggiungi o rimuovi elementi (da 2 a 12) per adattarli al tuo componente reale.
- Clicca su un elemento per assegnargli le proprie utility di align-self, order o dimensionamento flex.
- Cambia breakpoint per aggiungere varianti responsive che si applicano da sm, md, lg, xl o xxl in su.
- Controlla l'anteprima live, poi copia l'HTML generato o le classi del contenitore.