Bootstrap: Grid Systeem obv Flexbox
Grid Systeem van BS
Het grid systeem van BS is opgebouwd vanuit flexbox, is responsief en laat toe om maximaal 12 kolommen breed te gaan. Hierbij werd gekozen voor een maximaal van 12 kolommen aangezien dit deelbaar is door zowel 2, 3 als 4 waardoor meerdere symmetrische opsplits mogelijkheden bestaan.
Het is belangrijk dat we nooit meer dan 12 kolommen op eenzelfde rij plaatsen maar dit mogen er wel minder zijn dan twaalf.
Desgewenst kunnen we zelf aangeven hoeveel van de 12 ‘eenheden’ breed een kolom moet zijn vanaf een specifieke breakpoint. Hiervoor gebruiken we een kolom-klasse waarin het gewenste breakpoint en het aantal eenheden verwerkt staan. Bijvoorbeeld .col-md-6 geeft aan dat de bijhorende kolom vanaf het md (medium) breakpoint zes van de twaalf kolommen breed moet zijn.
Test jezelf: hoe gedraagt de volgende layout zich?
<div class=”row”>
<div class=”col-sm-12 col-md-6”> 1 </div>
<div class=”col-sm-12 col-md-6”> 2 </div>
</div>Vele klassen wordt chaotisch
Vermijd wel om te veel klassen voor toe te voegen of het wordt al snel complex en onoverzichtelijk; zeker aangezien de aantallen voor alle breakpoints moeten optellen tot een som van maximaal 12 eenheden.
Bemerk hierbij ook dat kleinere klassen opschalen (je hoeft enkel sm definiëren opdat sm en md zijn ingesteld): tenzij je verdere specificaties opgeeft worden de specificaties van kleinere breakpoints ook gebruikt voor de grotere breakpoints.
Als je enkel de klasse .col gebruikt dan zal BS zelf de layout bepalen.