Bootstrap Flex Playground
Bygg Bootstrap 5.3 flex-layouter visuellt och kopiera de exakta utility-klasserna — d-flex, justify-content, align-items, order, grow och mer.
—
Allt körs i din webbläsare — ingenting laddas upp.
Klasserna du anger gäller från denna brytpunkt och uppåt. Växla mellan brytpunkter för att bygga responsiva layouter.
Om Bootstrap Flex Playground
Bootstrap Flex Playground låter dig bygga flexbox-layouter med riktiga Bootstrap 5.3-verktygsklasser istället för ren CSS. Konfigurera behållaren — riktning, radbrytning, justify-content, align-items, gap — med segmenterade kontroller, klicka på ett objekt för att ställa in dess egna verktyg för align-self, order, grow och shrink, och se förhandsvisningen omorganiseras direkt.
Brytpunktsväljaren är det som gör det till mer än en leksak: välj sm, md, lg, xl eller xxl så får klasserna du ställer in från den punkten den responsiva infixen — justify-content-md-between, flex-lg-row — precis som Bootstraps mobile-first-system tillämpar dem från den brytpunkten och uppåt. Lägg till upp till 12 objekt för att simulera en realistisk komponent.
När layouten ser rätt ut, kopiera den genererade HTML:en eller bara behållarens klasser och klistra in dem direkt i ditt projekt. Allt körs i din webbläsare och inget laddas upp.
Så använder du Bootstrap Flex Playground
- Ställ in behållarens verktygsklasser — riktning, radbrytning, justify-content, align-items och gap — med de segmenterade kontrollerna.
- Lägg till eller ta bort objekt (2 till 12) för att matcha din riktiga komponent.
- Klicka på ett objekt för att ge det egna verktygsklasser för align-self, order eller flex-storlek.
- Byt brytpunkt för att lägga till responsiva varianter som gäller från sm, md, lg, xl eller xxl och uppåt.
- Granska förhandsvisningen, kopiera sedan den genererade HTML:en eller behållarens klasser.