Let's Build

Responsive

Containers

Met de container class kunnen we de lay-outs op het scherm bepalen, het biedt een responsieve breedte, padding en wordt in het midden van het scherm geplaatst. Het is handig om alle content van uw pagina in de container te plaatsen, behalve de onderdelen die de volledige schermbreedte gebruiken, zoals navigatie, headers en footers. De borders zijn toegevoegd voor de duidelijkheid en normaal niet zichtbaar!

De breekpunten zijn:

@media (min-width:576px){
.container{max-width:540px}
}
@media (min-width:768px){
.container{max-width:720px}
}
@media (min-width:992px){
.container{max-width:960px}
}
@media (min-width:1200px){
.container{max-width:1140px}
}
@media (min-width:1400px){
.container{max-width:1320px}
}

<main class="container">
  ...
</main>

De container-fluit class is 100% breed met een padding van 16px.

<main class="container-fluit">
  ...
</main>

Grid

Het grid systeem is eenvoudig en beschikt over maar 1 breakpoint, @media (min-width:992px) (tablet kleine laptop) en bestaat uit een rij met daarin kolommen. Met het grid systeem kun je inhoudsblokken naast elkaar zetten op grote schermen, op schermen gelijk of kleiner dan tabled schermen worden die blokken onder elkaar gezet. Het grid systeem is gemaakt met het flexbox systeem.

row + col

De col class verdeeld de kolommen evenredig in de rij row met een maximum van twaalf kolommen.

<div class="row">
  <div class="col">
    <p>Col</p>
  </div>
  <div class="col">
    <p>Col</p>
  </div>
  <div class="col">
    <p>Col</p>
  </div>
</div>

Row + Col-* (1 t/m 12)

De classes col-1 t/m col-12 hebben een breedte van een gedeelte van 100%, oplopend van col-1 = 8.333333%; tot en met col-12 = 100%; Met de kolommen col-1 tot col-12 kun je zoveel varieren als je maar wilt zolang de optelsom niet groter is dan 12. Aangezien elke kolom een gedeelte van 100% is:

Goed : col-2 + col-2 + col-3 + col-5 = 2+2+3+5 = 12 wat gelijk is aan 100%

Fout : col-5 + col-2 + col-3 + col-5 = 5+2+3+5 = 15 wat groter is dan 100%

Fout : col-1 + col-1 + col-3 + col-5 = 1+1+3+5 = 10 wat kleiner is dan 100%

<div class="row">
  <div class="col-1 border"><p>col-1</p></div>
  <div class="col-11 border"><p>col-11</p></div>
</div>
<div class="row">
  <div class="col-2 border"><p>col-2</p></div>
  <div class="col-10 border"><p>col-10</p></div>
</div>
<div class="row">
  <div class="col-3 border"><p>col-3</p></div>
  <div class="col-9 border"><p>col-9</p></div>
</div>
<div class="row">
  <div class="col-4 border"><p>col-4</p></div>
  <div class="col-8 border"><p>col-8</p></div>
</div>
<div class="row">
  <div class="col-5 border"><p>col-5</p></div>
  <div class="col-7 border"><p>col-7</p></div>
</div>
<div class="row">
  <div class="col-6 border"><p>col-6</p></div>
  <div class="col-6 border"><p>col-6</p></div>
</div>
<div class="row">
  <div class="col-12 border"><p>col-12</p></div>
</div>

Row + Col-* (half third twothird quarter threequarter)

col-half = 50%

col-third = 35%

col-twothird = 65%

col-quarter = 25%

col-threequarter = 75%

<div class="row">
  <div class="col-quarter border"><p>col-quarter</p></div>
  <div class="col-threequarter border"><p>col-threequarter</p></div>
</div>
<div class="row">
  <div class="col-third border"><p>col-third</p></div>
  <div class="col-twothird border"><p>col-twothird</p></div>
</div>
<div class="row">
  <div class="col-half border"><p>col-half</p></div>
  <div class="col-half border"><p>col-half</p></div>
</div>