Bootstrap: Containers
We bespraken zonet hoe er een andere weergave kan worden opgesteld vanuit klassenamen die verwijzen naar de breakpoints (xs, sm, md, lg en xl).
Natuurlijk hebben we soms ook scenarios waar we een ‘container’ div gebruiken om de inhoud van onze pagina een consistente marge te geven. Containers zijn basis layout elementen.
–> Om de breedte te sturen steek je content in containers.
In Bootstrap zijn er drie soorten container-klassen ingebouwd.
- De “container-fluid” klasse neemt simpelweg de hele breedte van het scherm in.
- De “container” klasse heeft een maximum breedte voor elk ‘breakpoint’.
- En tenslotte hebben we breakpoints-specifieke container klassen waarbij we de volledige breedte (fluid) innemen tot het vernoemde breakpoint om daarna met een maximum breedte te werken zoals de gewone container klasse. Dit is dus een soort tussenoplossing.
Met deze klassen kunnen we de breedte van onze pagina sturen.
Als we een .container gebruiken als wrapper dan heeft deze een andere max-width afhankelijk van de schermbreedte (breakpoints):
Illustratie breakpoint-specifieke container
.container-xl is 100% breed tot aan het xl-breakpoint (wat op een schermbreedte van 1200px vastligt). Vanaf het xl-breakpoint is de breedte een constante waarde (die op 1140px ligt voor het xl-breakpoint).
Met .container-md hebben we een max-width van 720px vanaf het moment waarop onze viewport breder is dan 768px (medium breakpoint) en voordien blijft deze 100% breed. De beperking van een max-width voor het sm-breakpoint wordt met andere woorden genegeerd.
We geven dus aan dat de container een max-width van 100% moet behouden tot aan het opgegeven breakpoint om daarna de constante max-width waarde voor dit breakpoint te gebruiken.
Containers hebben standaard in Bootstrap 15px padding aan weerskanten. We kunnen echter extra padding of margin toevoegen.