Bootstrap grid

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Grid

<div class=“container”>

<div class=“container-fluid”>

Een terugblik op de vorige les

Containers

In de vorige les hebben we geleerd dat een container element noodzakelijk is om de inhoud van de site te verpakken. 

Containers worden gebruikt om de inhoud erin op te vullen en er zijn twee containerklassen beschikbaar:

1. De .container klasse biedt een responsieve container met een vaste breedte.
2. De .container-fluid klasse biedt een container over de volledige breedte, die de volledige breedte van de viewport inneemt.

Het verschil tussen .container klasse en 

.container-fluid klasse

Fixed container

Gebruik de .container klasse om een responsive container met een vaste breedte te maken.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
max-width	100%	540px	720px	960px	1140px

Welke container strekt zich uit over de hele breedte van de website?

1. container
2. container-fluid
3. containter-xl
4. container-lg

Indeling website met grid

Indeling van een website met Bootstrap Grid

Zo ziet grid er uit op de website

Hoe werkt het gridsysteem?

Drie belangrijke onderdelen: containers, rijen en kolommen

• Containers: <class=“container”> of <class=“container-fluid”>
  
• Rijen: <div class=“row”> moeten in containers geplaatst worden
  
• Kolommen <div class=“col”> moeten geplaatst worden in een rij
  
• Inhoud moet geplaats worden in kolommen.
  

Alleen zo werkt het grid systeem!!!

In welke volgorde zet je het grid systeem in elkaar

<div class="row"> 

<div class="container"> 

<div class="col"> 

Bootstrap grid syteem

Het grid systeem van Bootstrap staat maximaal 12 kolommen over de pagina toe.

Als je niet alle 12 kolommen afzonderlijk wilt gebruiken, kan je de kolommen groeperen om bredere kolommen te maken.

Zo ziet Bootstrap grid eruit

Grid klassen

Het Bootstrap-rastersysteem heeft vier klassen:

• xs (voor telefoons en schermen met een breedte van minder dan 768px)
• sm (voor tablets en schermen gelijk aan of groter dan 768px breed)
  
• md (voor kleine laptops en schermen gelijk aan of groter dan 992px breed)
  
• lg (voor laptops en desktops en schermen gelijk aan of groter dan 1200px breed)

De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.

Tip: elke klasse wordt opgeschaald, dus als je dezelfde breedte voor xs en sm wilt instellen, hoeft u alleen de xs klasse op te geven.

Responsive kolommen

Het volgende voorbeeld laat zien hoe je vier kolommen van gelijke breedte kunt krijgen, beginnend bij tablets en schaalbaar naar grote desktops. 

Op mobiele telefoons of schermen die minder dan 576px breed zijn, worden de kolommen automatisch gestapeld.

Uit hoeveel kolommen bestaat bootstrap?

Hoeveel verschillende klassen heeft het Bootstrap-rastersysteem?

1. 6
2. 3
3. 2
4. 4

Opdrachten

• Maak de website ‘bloembinderij’
  
• Zorg ervoor dat bij kleine schermen (xs) de bloemen onder elkaar komen te staan

Toon in het totaal 6 bloemen,

• Bij grootte schermen(lg)-> zet alle bloemen naast elkaar
  
• Bij medium schermen (md)-> zet 3 bloemen naast elkaar
  
• Bij kleine schermen(sm)-> zet de 6 bloemen onder elkaar
  

• Doe een git add .
  
• git commit –m "Bootstrap Grid"
  
• git push

Portfolio opdracht

• Bekijk je portfolio en pas de geleerd lesstof toe.

Heb je de les begrepen?

😒🙁😐🙂😃

Zijn er nog vragen?