Bootstrap-grid speeltuin
Bouw visueel responsieve lay-outs met het Bootstrap 5.3-grid en kopieer de exacte klassen — row, col, offsets, volgorde, tussenruimtes en uitlijning.
—
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 lay-outs te bouwen.
Over Bootstrap-grid speeltuin
De Bootstrap Grid Playground bouwt responsieve rij-en-kolomlay-outs met het echte Bootstrap 5.3-rastersysteem. Voeg tot 12 kolommen toe aan een rij, klik op een kolom om de breedte, offset en volgorde in te stellen, en pas de goten en uitlijning van de rij aan — de preview en de gegenereerde markup worden bij elke wijziging live bijgewerkt.
Omdat Bootstrap-rasters mobile-first zijn, staat de breakpointschakelaar centraal: stel een kolom in op col-6 in de basis en col-md-4 bij md, en je hebt het klassieke patroon gebouwd van stapelen op mobiel, drie naast elkaar op desktop, zonder een regel code te schrijven. Offsets, volgorde en gotenklassen gebruiken allemaal dezelfde responsieve infixen.
De output is nette, kopieer-en-plak HTML — een rij-div met zijn kolomkinderen en precies de klassen die je hebt geconfigureerd. Kopieer het hele fragment of alleen de rijklassen; alles draait lokaal in je browser.
Hoe gebruik je Bootstrap-grid speeltuin
- Voeg kolommen toe aan de rij — tot maximaal 12 — en klik op een kolom om deze te selecteren.
- Stel de span, offset en volgorde van de geselecteerde kolom in voor de huidige breakpoint.
- Wissel van breakpoint (sm tot xxl) om te bepalen hoe de lay-out herschikt op grotere schermen.
- Pas de goten en uitlijningshulpprogramma's van de rij aan.
- Bekijk de live preview en kopieer daarna de gegenereerde HTML of de rijklassen.