Bootstrap 4 containers
containers
Je hebt uit het vorige hoofdstuk geleerd dat Bootstrap een bevattend element nodig heeft om de inhoud van de site in te pakken.
Containers worden gebruikt om de inhoud erin op te vullen en er zijn twee containerklassen beschikbaar:
- De
.containerklasse biedt een responsieve container met vaste breedte - De
.container-fluidklasse biedt een container over de volledige breedte die de volledige breedte van de viewport beslaat
Vaste container
Gebruik de .containerklasse om een responsieve container met vaste breedte te maken.
Merk op dat de breedte ( max-width) zal veranderen op verschillende schermformaten:
|
Extra klein <576px |
Klein ≥576px |
Gemiddeld ≥768px |
Groot (992px) |
Extra groot (1200px) |
|
|---|---|---|---|---|---|
| Maximale wijdte | 100% | 540px | 720px | 960px | 1140px |
Open het onderstaande voorbeeld en wijzig het formaat van het browservenster om te zien dat de containerbreedte op verschillende breekpunten verandert:
Voorbeeld
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Vloeistofcontainer
Gebruik de .container-fluidklasse om een container over de volledige breedte te maken, die altijd de volledige breedte van het scherm beslaat ( widthis altijd 100%):
Voorbeeld
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Opvulling van containers
Standaard hebben containers 15px linker- en rechteropvulling, zonder opvulling aan de boven- of onderkant. Daarom gebruiken we vaak spatiëringshulpprogramma's , zoals extra opvulling en marges om ze er nog beter uit te laten zien. Betekent bijvoorbeeld .pt-3"voeg een top padding van 16px toe":
Voorbeeld
<div class="container pt-3"></div>
U zult veel meer leren over spatiëringshulpprogramma's in ons hoofdstuk BS4 Hulpprogramma's .
Containerrand en kleur
Andere hulpprogramma's, zoals randen en kleuren, worden ook vaak samen met containers gebruikt:
Voorbeeld
Mijn eerste Bootstrap-pagina
Deze container heeft een rand en wat extra opvulling en marges.
Mijn eerste Bootstrap-pagina
Deze container heeft een donkere achtergrondkleur en een witte tekst, en wat extra opvulling en marges.
Mijn eerste Bootstrap-pagina
Deze container heeft een blauwe achtergrondkleur en een witte tekst, en wat extra opvulling en marges.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
U zult veel meer leren over kleuren en randhulpprogramma's in onze BS4 Colors Chapter en BS4 Utilities Chapter .
Responsieve containers
U kunt de .container-sm|md|lg|xlklassen ook gebruiken om responsieve containers te maken.
De max-widthvan de container zal veranderen op verschillende schermformaten/viewports:
| Klas |
Extra klein <576px |
Klein ≥576px |
Gemiddeld ≥768px |
Groot (992px) |
Extra groot (1200px) |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Voorbeeld
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Wist u?
W3.CSS is een uitstekend alternatief voor Bootstrap 4.
W3.CSS is kleiner, sneller en gemakkelijker te gebruiken.
Als je W3.CSS wilt leren, ga dan naar onze W3.CSS-zelfstudie .