Containers

Hoe ze werken

Containers zijn het meest basale layout-element in Bootstrap en zijn verplicht bij gebruik van ons standaard grid-systeem. Containers worden gebruikt om de content erbinnen te omvatten, van padding te voorzien en (soms) te centreren. Hoewel containers genest kunnen worden, hebben de meeste layouts geen geneste container nodig.

Bootstrap komt met drie verschillende containers:

• .container, die op elk responsief breakpoint een max-width instelt
• .container-{breakpoint}, die width: 100% is tot aan het opgegeven breakpoint
• .container-fluid, die op alle breakpoints width: 100% is

De onderstaande tabel laat zien hoe de max-width van elke container zich verhoudt tot de oorspronkelijke .container en .container-fluid op elk breakpoint.

Zie ze in actie en vergelijk ze in ons Grid-voorbeeld.

Standaard container

Onze standaard .container-klasse is een responsieve container met vaste breedte, wat betekent dat de max-width op elk breakpoint verandert.

<div class="container">
  <!-- Content here -->
</div>

Responsieve containers

Met responsieve containers kun je een klasse opgeven die 100% breed is totdat het opgegeven breakpoint is bereikt, waarna we max-widths toepassen voor elk van de hogere breakpoints. Zo is .container-sm om te beginnen 100% breed tot het sm-breakpoint is bereikt, waarna hij meeschaalt met md, lg, xl en xxl.

<div class="container-sm">100% breed tot het small-breakpoint</div>
<div class="container-md">100% breed tot het medium-breakpoint</div>
<div class="container-lg">100% breed tot het large-breakpoint</div>
<div class="container-xl">100% breed tot het extra large-breakpoint</div>
<div class="container-xxl">100% breed tot het extra extra large-breakpoint</div>

Fluid containers

Gebruik .container-fluid voor een container met volledige breedte, die de hele breedte van de viewport beslaat.

<div class="container-fluid">
  ...
</div>

Sass

Zoals hierboven te zien is, genereert Bootstrap een reeks vooraf gedefinieerde containerklassen om je te helpen de layouts te bouwen die je voor ogen hebt. Je kunt deze vooraf gedefinieerde containerklassen aanpassen door de Sass-map (te vinden in _variables.scss) aan te passen die ze aanstuurt:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Naast het aanpassen van de Sass kun je ook je eigen containers maken met onze Sass-mixin.

// Bron-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;
}

// Gebruik
.custom-container {
  @include make-container();
}

Voor meer informatie en voorbeelden over het aanpassen van onze Sass-maps en -variabelen verwijzen we je naar de Sass-sectie van de Grid-documentatie.