Bootstrap Flex Playground
Erstelle Bootstrap-5.3-Flex-Layouts visuell und kopiere die exakten Utility-Klassen — d-flex, justify-content, align-items, order, grow und mehr.
—
Alles läuft in deinem Browser — es wird nichts hochgeladen.
Die von dir gesetzten Klassen gelten ab diesem Breakpoint aufwärts. Wechsle die Breakpoints, um responsive Layouts zu erstellen.
Über Bootstrap Flex Playground
Der Bootstrap-Flex-Playground lässt Sie Flexbox-Layouts mit echten Bootstrap-5.3-Utility-Klassen statt mit rohem CSS aufbauen. Konfigurieren Sie den Container — Richtung, Umbruch, justify-content, align-items, gap — mit Segmentschaltern, klicken Sie auf ein Element, um dessen eigene Utilities für align-self, order, grow und shrink festzulegen, und beobachten Sie, wie sich die Live-Vorschau sofort neu anordnet.
Der Breakpoint-Umschalter macht daraus mehr als ein Spielzeug: Wählen Sie sm, md, lg, xl oder xxl, und die ab diesem Punkt gesetzten Klassen erhalten das responsive Infix — justify-content-md-between, flex-lg-row — genau so, wie Bootstraps Mobile-First-System sie ab diesem Breakpoint aufwärts anwendet. Fügen Sie bis zu 12 Elemente hinzu, um eine realistische Komponente zu simulieren.
Wenn das Layout stimmt, kopieren Sie das generierte HTML oder nur die Container-Klassen und fügen sie direkt in Ihr Projekt ein. Alles läuft in Ihrem Browser, nichts wird hochgeladen.
So verwenden Sie Bootstrap Flex Playground
- Legen Sie die Container-Utilities fest — Richtung, Umbruch, justify-content, align-items und gap — mit den Segmentschaltern.
- Fügen Sie Elemente hinzu oder entfernen Sie sie (2 bis 12), um Ihrer echten Komponente zu entsprechen.
- Klicken Sie auf ein Element, um ihm eigene Utilities für align-self, order oder Flex-Größe zu geben.
- Wechseln Sie die Breakpoints, um responsive Varianten hinzuzufügen, die ab sm, md, lg, xl oder xxl aufwärts gelten.
- Prüfen Sie die Live-Vorschau und kopieren Sie dann das generierte HTML oder die Container-Klassen.