Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

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 een max-widthbij elk responsief breekpunt instelt
  • .container-fluid, wat width: 100%op alle breekpunten is
  • .container-{breakpoint}, dat is width: 100%tot het opgegeven breekpunt

De onderstaande tabel illustreert hoe elke container zich max-widthverhoudt tot het origineel .containeren .container-fluidvoor 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 .containeris een responsieve container met vaste breedte, wat betekent dat de klasse max-widthop 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-widths toepassen voor elk van de hogere breekpunten. Het is bijvoorbeeld .container-sm100% breed om te starten totdat het smbreekpunt 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-fluidvoor 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 .