Skip to main content

Bootstrap Grid systeem

Bootstrap maakt niet alleen jouw opmaak makkelijker, maar ook jouw structuur!

Bootstrap heeft het ook makkelijker gemaakt om flexbox te gebruiken. Met flexbox kan je jouw elementen verdelen in verschillende posities. Bootstrap maakt ook gebruik van flexbox, maar nu is het simpel voor je gemaakt en kan je net als de opmaak in classnamen aanroepen.

De layout van Bootstrap

image-1663268535257.png

In Bootstrap heeft het gridysteem een standaard layout. Wij gaan per onderdeel uitleggen hoe dat in elkaar zit:

Container

De container is de buitenste laag. Ze zijn verantwoordelijk om al jouw content responsive te maken. 
Je hebt twee type containers die je kan gebruiken om jouw pagina responsvie te maken:

De meeste sites gebruiken .container, omdat het aantrekkelijker maakt voor de gebruiker om jouw content te lezen. Zie hier een voorbeeld van zalando.nl die een .container design gebruikt:

image-1663406146373.png

Zoals je ziet laat Zalando.nl altijd ruimte vrij aan de linker en rechter kant. Mensen vinden het gemakkelijker om te lezen als alle content compact bij elkaar zit. Dat is ook makkelijker voor de gebruiker om te klikken. Dan hoeven zie niet over de hele pagina te klikken.

Rows en Columns

In de container valt het ook op dat Zalando meerdere rows heeft. Binnen deze rows heeft het ook kolommen (columns). Zie hier het voorbeeld:

image-1663405980840.png

Je ziet in een row twee kolommen: col-8 en col-4.  Dit zijn de kolommen (columns). In totaal passen er 12 kolommen in een row. Deze kolommen gebruik jouw ruimte in te delen. Daarom zie je bij de eerste row een col-8. Dat is de text. En bij col-4 zie je een plaatje. Dus de verhouding is dan 67% en 33%. 

Als je het nog een beetje ingewikkeld vindt, dan kan je nog hiernaar kijken: Bootstrap 5 grid system - examples and tutorial (mdbootstrap.com)

Opdracht: Spelen met Bootstrap

Nu is het tijd om aan de slag te gaan hoe Bootstrap werkt:

image-1663545649307.png

Standaard structuur van Bootstrap

Stappenplan:

  • Maak een container
    • Maak in de container een row
      • Maak in de row twee kolommen met de verhouding 25% en 75%
        • In de 25% moet een rode achtergrond van Bootstrap staan
        • In de 75% zet je een titel en een paragraaf met text

Wat lever je in?

  1. Een screenshot van jouw .blade.php file waarin je gewerkt hebt
  2. Een screenshot van jouw browser met de resultaten van de file.
Back to top