Bootstrap kolommen

Hoe rekent Bootstrap met kolommen?

Klasse (Bootstrap 5)	Schermbreedte (Pixels)	Mensentaal: Welke apparaten horen hier doorgaans bij?
`.col-` (geen letters)	Minder dan 576px [index.html]	Alle normale telefoons (rechtop / portrait) [index.html]. • Voorbeelden: iPhone (alle reguliere modellen), Samsung Galaxy, Google Pixel. De content staat hier vrijwel altijd in 1 strakke kolom onder elkaar [index.html].
`.col-sm-`	Vanaf 576px tot 768px [index.html]	Grote telefoons (liggend / landscape) en kleine mini-tablets [index.html]. • Voorbeelden: iPhone Pro Max (liggend), iPad Mini (rechtop), oudere kleine e-readers en budget-tablets.
`.col-md-`	Vanaf 768px tot 992px [index.html]	Normale tablets (rechtop / portrait) [index.html]. • Voorbeelden: De standaard iPad (10.2 / 10.9 inch rechtop), Samsung Galaxy Tab (rechtop). Dit is het klassieke kantelpunt waarop een site vaak van mobiel menu naar desktop-menu switcht.
`.col-lg-`	Vanaf 992px tot 1200px [index.html]	Grote tablets (liggend) en kleine laptops / netbooks [index.html]. • Voorbeelden: iPad Air & Pro (liggend), de klassieke iPad (liggend), kleinere MacBooks (12/13 inch), Microsoft Surface.
`.col-xl-`	Vanaf 1200px tot 1400px [index.html]	Normale laptops en standaard computerschermen [index.html]. • Voorbeelden: MacBook Pro 14/16 inch, standaard kantoormonitoren (Full HD resoluties in browser-venster), grotere desktops. Hier wil je vaak je 3- of 4-koloms grids voluit laten glanzen.
`.col-xxl-`	Vanaf 1400px en groter [index.html]	Grote desktops, iMacs en brede computermonitoren [index.html]. • Voorbeelden: 24/27 inch iMacs, breedbeeld (Ultrawide) monitoren. Hier grijpen de Bootstrap-containers in om te zorgen dat je tekstregels niet pijnlijk lang worden uitgerekt [index.html].

hoe werkt het?

Elk beeldscherm wordt verdeeld in twaalf kolommen: telefoon, tablet, laptop etc. De ruimte wordt verdeeld over een rij met een kolommensysteem.

Als je het volgende schrijft, gebeurt er niet aparts want er staan drie div's die ieder de volle breedte vullen:

<div class="row">
  <div>kolom 1</div>
  <div>kolom 2</div>
  <div>kolom 3</div>
</div>

Je hebt 'col' nodig

Met het volgende, worden de div's ieder een kolom in een rij en in dit geval zal iedere kolm 1/3 van de rij in beslag nemen, op ieder soort scherm

<div class="row">
  <div class="col">kolom 1</div>
  <div class="col">kolom 2</div>
  <div class="col">kolom 3</div>
</div>

Eén kolom

<div class="row">
  <div class="col">deze kolom</div>
</div>

Als je dit schrijft, komt er uiteraard maar één kolom en op elk apparaat zal die de hele rij vullen

De extra waarden in de classname

<div class="row">
  <div class="col-*-*">deze kolom</div>
</div>

Je kunt verder specificeren hoe breed de kolom wordt en hoe het er op verschillende schermen uitziet. Het eerste sterretje stelt het soort scherm voor en het tweede sterretje het aantal kolommen van de twaalf 12 die deze div zal innemen. Als één kolom hebt, bijvoorbeeld <div class="col-sm-4">, is de div op schermen sm (tablet) en breder 4 kolommen breed. Op een telefoon is deze div de hele breedte, omdat de telefoon leest dat er één kolom is. Zonder de sm is deze div op alle schermen 4 kolommen (1/3 van de breedte).

Meerdere kolommen

Als je meer kolommen hebt, kun je met getallen aangeven hoe breed de betreffende kolom wordt weergeven. Met het volgende zul je op tablet en breder zien dat de kolommen 1/4 en 3/4 van het scherm innemen, op de telefoon komen deze kolommen onder elkaar want de telefoon ziet de col-aanduiding niet :

<div class="row">
  <div class="col-sm-3">25%</div>
  <div class="col-sm-9">75%</div>
</div>

Als je in dit voorbeeld de sm weglaat:

<div class="row">
  <div class="col">div 1div>
  <div class="col">div 2</div>
</div>

zullen alle apparaten de twee kolommen even breed naast elkaar tonen. Als je het volgende schrijft, zal tablet en breder 3 kolommen geven aan de eerste div en de rest over de breedte verdelen, maar op de telefoon telt de eerste kolom niet als kolom maar als een gewone div en dan komen de de div's onder elkaar

<div class="row">
  <div class="col-sm-3">div 1div>
  <div class="col">div 2</div>
</div>

Met het volgende zul je op ieder apparaat een verdeling zien van 3/12 en 9/12

<div class="row">
  <div class="col-3">div 1div>
  <div class="col-9">div 2</div>
</div>

In het volgende voorbeeld zul je op tablet en breder eerst 4 kolommen zien en de twee rechter kolommen zullen de ruimte gelijk verdelen

  <div class="row">
   <div class="col-sm-4 bg-primary text-white">33.33%</div>
   <div class="col bg-dark text-white">33.33%</div>
   <div class="col bg-primary text-white">33.33%</div>
 </div>

De telefoon geeft het anders weer, nl. als een gewone div en daaronder twee div's naast elkaar die ieder 50% krijgen, zoals:

  <div class="row">
   <div class="bg-primary text-white">33.33%</div>
   <div class="col bg-dark text-white">33.33%</div>
   <div class="col bg-primary text-white">33.33%</div>
 </div>

Verder differentiëren per apparaat

Een voorbeeld om op verschillende apparaten een andere weergave te krijgen:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Op een telefoon zullen de div's ieder een volle rij pakken (twee gewone div's onder elkaar), iets grotere schermen laten 3/12 en 9/12 zien en nog grotere apparaten half-half.

Alleen het apparaat specificeren en niet de breedte per kolom

Hieronder een voorbeeld. Als je wel zegt voor welk apparaat maar niet de breedte per kolom dan zullen de div's verdeeld worden over de breedte van de row, maar in een smaller scherm dan md worden de div's op elkaar gestapeld als gewone div's zonder col.

<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

Wat ik het gemakkelijkste vind om te onthouden, is: als de regel niet geldt voor het apparaat, zal dat apparaat er een kale div van maken. Een telefoon leest <div class="col-sm-4">tekst</div> als <div>tekst</div> en die is gewoon 100% breed.

Links

Trefwoorden