Bootstrap Flex Playground
Bouw Bootstrap 5.3 flex-layouts visueel en kopieer de exacte utility-klassen — d-flex, justify-content, align-items, order, grow en meer.
—
Alles draait in je browser — er wordt niets geüpload.
De klassen die je instelt, gelden vanaf dit breakpoint en hoger. Wissel van breakpoint om responsieve layouts te bouwen.
Over Bootstrap Flex Playground
De Bootstrap Flex Playground laat je flexbox-lay-outs bouwen met echte Bootstrap 5.3-hulpprogrammaklassen in plaats van pure CSS. Configureer de container — richting, wrapping, justify-content, align-items, gap — met gesegmenteerde bedieningselementen, klik op een item om zijn eigen align-self-, order-, grow- en shrink-hulpprogramma's in te stellen, en zie de live preview direct herschikken.
De breakpointschakelaar maakt het meer dan een speeltje: kies sm, md, lg, xl of xxl en de klassen die je vanaf dat punt instelt, krijgen het responsieve infix — justify-content-md-between, flex-lg-row — precies zoals Bootstraps mobile-first-systeem ze vanaf die breakpoint en groter toepast. Voeg tot 12 items toe om een realistisch component te simuleren.
Ziet de lay-out er goed uit, kopieer dan de gegenereerde HTML of alleen de containerklassen en plak ze rechtstreeks in je project. Alles draait in je browser en niets wordt geüpload.
Hoe gebruik je Bootstrap Flex Playground
- Stel de containerhulpprogramma's in — richting, wrap, justify-content, align-items en gap — met de gesegmenteerde bedieningselementen.
- Voeg items toe of verwijder ze (2 tot 12) om overeen te komen met je echte component.
- Klik op een item om het zijn eigen align-self-, order- of flex-groottehulpprogramma's te geven.
- Wissel van breakpoint om responsieve varianten toe te voegen die vanaf sm, md, lg, xl of xxl gelden.
- Bekijk de live preview en kopieer daarna de gegenereerde HTML of de containerklassen.