Bootstrap: Grid System

Binnen Bootstrap is een sterk grid systeem ingebouwd. Hierdoor kan je het scherm opdelen in rijen en kolommen om een leuke layout aan te maken. 

De basis structuur van het Bootstrap Grid –niet te verwarren met het CSS Grid systeem– is altijd een “row” met daarin een of meerdere “col”s.

Probeer volgende code eens uit in een HTML bestand met de Bootstrap CSS ingeladen:

<div class="row">
   <div class="col bg-primary"> 1 </div>
   <div class="col bg-danger"> 2 </div>
   <div class="col bg-info"> 3 </div>
</div>

We krijgen hiermee automatisch een layout van drie kolommen binnen onze rij.

Het is natuurlijk mogelijk om deze weergave vanaf een bepaald breakpoint te laten verspringen naar een ‘stacked’ (opeengestapelde) weergave (display: block) door hier breakpoints aan te koppelen zoals we zo dadelijk gaan zien.