Op deze pagina kan je precies zien wat er gebeurt met de breedtes van Bootstrap kolommen als je het formaat van je browser aanpast.
Als je de breedte van je browser hebt aangepast en je drukt op de groene knop "Bereken kolom breedtes" krijg je de nieuwe breedtes in pixels van alle Bootstrap kolommen te zien.
Van boven naar beneden is er gebruik gemaakt van verschillende bootstrap breedtes.
12/12 row is gemaakt met 1x <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
6/12 row is gemaakt met 2x <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
4/12 row is gemaakt met 3x <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
3/12 row is gemaakt met 4x <div class="col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
Donkerblauwe blokjes aan de zijkanten van de balken worden 'gutters' genoemd en zijn 12px breedt.
Padding tussen 2 blokjes zit dus 2 x 12 px = 24px totaal.
Bootstrap Container
12/12
6/12
6/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12