containers
Containers zijn een fundamentele bouwsteen van Bootstrap die uw inhoud binnen een bepaald apparaat of kijkvenster bevat, opvult en uitlijnt.
Hoe ze werken
Containers zijn het meest elementaire lay-outelement in Bootstrap en zijn vereist bij gebruik van ons standaardrastersysteem . Containers worden gebruikt om de inhoud erin te bevatten, op te vullen en (soms) te centreren. Hoewel containers genest kunnen worden, hebben de meeste lay-outs geen geneste container nodig.
Bootstrap wordt geleverd met drie verschillende containers:
.container
, die eenmax-width
bij elk responsief breekpunt instelt.container-fluid
, watwidth: 100%
op alle breekpunten is.container-{breakpoint}
, dat iswidth: 100%
tot het opgegeven breekpunt
De onderstaande tabel illustreert hoe elke container zich max-width
verhoudt tot het origineel .container
en .container-fluid
voor elk breekpunt.
Bekijk ze in actie en vergelijk ze in ons Grid-voorbeeld .
Extra klein <576px |
Klein ≥576px |
Gemiddeld ≥768px |
Groot (992px) |
X-Large (1200px) |
XX-groot (1400px) |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Standaardcontainer
Onze standaardklasse .container
is een responsieve container met vaste breedte, wat betekent dat de klasse max-width
op elk breekpunt verandert.
<div class="container">
<!-- Content here -->
</div>
Responsieve containers
Met responsieve containers kunt u een klasse opgeven die 100% breed is totdat het opgegeven breekpunt is bereikt, waarna we max-width
s toepassen voor elk van de hogere breekpunten. Het is bijvoorbeeld .container-sm
100% breed om te starten totdat het sm
breekpunt is bereikt, waar het wordt opgeschaald met md
, lg
, xl
, en xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Vloeistofcontainers
Gebruik .container-fluid
voor een container over de volledige breedte, die de volledige breedte van de viewport beslaat.
<div class="container-fluid">
...
</div>
Sass
Zoals hierboven weergegeven, genereert Bootstrap een reeks vooraf gedefinieerde containerklassen om u te helpen de gewenste lay-outs te bouwen. U kunt deze vooraf gedefinieerde containerklassen aanpassen door de Sass-kaart (te vinden in _variables.scss
) die ze aanstuurt aan te passen:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Naast het customizen van de Sass, kun je met onze Sass mixin ook je eigen containers maken.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Raadpleeg de Sass-sectie van de Grid-documentatie voor meer informatie en voorbeelden over het wijzigen van onze Sass-kaarten en -variabelen .