Bootstrap Grid-Spielwiese
Erstellen Sie responsive Layouts mit dem Bootstrap 5.3-Raster visuell und kopieren Sie die exakten Klassen — row, col, Versätze, Reihenfolge, Innenabstände und Ausrichtung.
—
Alles läuft in Ihrem Browser — nichts wird hochgeladen.
Die festgelegten Klassen gelten ab diesem Breakpoint und aufwärts. Wechseln Sie den Breakpoint, um responsive Layouts zu erstellen.
Über Bootstrap Grid-Spielwiese
Der Bootstrap-Grid-Playground erstellt responsive Zeilen-und-Spalten-Layouts mit dem echten Bootstrap-5.3-Grid-System. Fügen Sie bis zu 12 Spalten zu einer Zeile hinzu, klicken Sie auf eine Spalte, um ihre Breite, Versatz und Reihenfolge festzulegen, und passen Sie Abstände und Ausrichtung der Zeile an — Vorschau und generiertes Markup aktualisieren sich live bei jeder Änderung.
Da Bootstrap-Grids mobile-first sind, ist der Breakpoint-Umschalter zentral: Setzen Sie eine Spalte auf col-6 in der Basis und col-md-4 bei md, und Sie haben ohne eine Zeile Code das klassische Muster „stapelt auf Mobilgeräten, drei nebeneinander auf dem Desktop“ erstellt. Versatz-, Reihenfolge- und Abstandsklassen übernehmen alle dieselben responsiven Infixe.
Die Ausgabe ist sauberes Copy-paste-HTML — ein row-div mit seinen Spalten-Kindelementen und genau den von Ihnen konfigurierten Klassen. Kopieren Sie das gesamte Snippet oder nur die Zeilen-Klassen; alles läuft lokal in Ihrem Browser.
So verwenden Sie Bootstrap Grid-Spielwiese
- Fügen Sie der Zeile Spalten hinzu — bis zu 12 — und klicken Sie auf eine, um sie auszuwählen.
- Legen Sie Spannweite, Versatz und Reihenfolge der ausgewählten Spalte für den aktuellen Breakpoint fest.
- Wechseln Sie die Breakpoints (sm bis xxl), um festzulegen, wie das Layout auf größeren Bildschirmen umbricht.
- Passen Sie die Abstände und Ausrichtungs-Utilities der Zeile an.
- Prüfen Sie die Live-Vorschau und kopieren Sie dann das generierte HTML oder die Zeilen-Klassen.