Breakpoints

Kernbegrippen

• Breakpoints zijn de bouwstenen van responsive design. Gebruik ze om te bepalen wanneer je layout zich mag aanpassen bij een bepaald viewport- of apparaatformaat.

• Gebruik media queries om je CSS per breakpoint op te bouwen. Media queries zijn een CSS-functionaliteit waarmee je stijlen voorwaardelijk kunt toepassen op basis van een set browser- en besturingssysteemparameters. Wij gebruiken meestal min-width in onze media queries.

• Mobile first, responsive design is het doel. De CSS van Bootstrap streeft ernaar zo min mogelijk stijlen toe te passen om een layout te laten werken op het kleinste breakpoint, en voegt daarna stijlen toe om dat ontwerp aan te passen voor grotere apparaten. Dat optimaliseert je CSS, verbetert de rendertijd en zorgt voor een prettige ervaring voor je bezoekers.

Beschikbare breakpoints

Bootstrap bevat zes standaard breakpoints, soms grid tiers genoemd, om responsief mee te bouwen. Deze breakpoints kun je aanpassen als je onze Sass-bronbestanden gebruikt.

Elk breakpoint is gekozen om comfortabel containers te kunnen bevatten waarvan de breedtes veelvouden van 12 zijn. Breakpoints zijn ook representatief voor een deelverzameling van gangbare apparaatformaten en viewport-afmetingen — ze richten zich niet specifiek op elke use case of elk apparaat. In plaats daarvan bieden de bereiken een sterke en consistente basis om op voort te bouwen voor vrijwel elk apparaat.

Deze breakpoints zijn aanpasbaar via Sass — je vindt ze in een Sass-map in onze _variables.scss-stylesheet.

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

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.

Media queries

Omdat Bootstrap mobile first is ontwikkeld, gebruiken we een handvol media queries om zinnige breakpoints voor onze layouts en interfaces te maken. Deze breakpoints zijn grotendeels gebaseerd op minimale viewportbreedtes en stellen ons in staat elementen op te schalen naarmate de viewport verandert.

Min-width

Bootstrap gebruikt hoofdzakelijk de volgende media query-bereiken — oftewel breakpoints — in onze Sass-bronbestanden voor onze layout, ons grid-systeem en onze componenten.

// Bron-mixins

// Geen media query nodig voor het xs-breakpoint, want dat is feitelijk `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Gebruik

// Voorbeeld: verbergen vanaf `min-width: 0`, en daarna tonen vanaf het `sm`-breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Deze Sass-mixins vertalen zich in onze gecompileerde CSS met de waarden die in onze Sass-variabelen zijn gedeclareerd. Bijvoorbeeld:

// X-Small-apparaten (telefoons staand, minder dan 576px)
// Geen media query voor `xs`, want dit is de standaard in Bootstrap

// Small-apparaten (telefoons liggend, 576px en breder)
@media (min-width: 576px) { ... }

// Medium-apparaten (tablets, 768px en breder)
@media (min-width: 768px) { ... }

// Large-apparaten (desktops, 992px en breder)
@media (min-width: 992px) { ... }

// X-Large-apparaten (grote desktops, 1200px en breder)
@media (min-width: 1200px) { ... }

// XX-Large-apparaten (zeer grote desktops, 1400px en breder)
@media (min-width: 1400px) { ... }

Max-width

Af en toe gebruiken we media queries die de andere kant op werken (het gegeven schermformaat of kleiner):

// Geen media query nodig voor het xs-breakpoint, want dat is feitelijk `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Voorbeeld: stijlen vanaf het medium-breakpoint en kleiner
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Deze mixins nemen de gedeclareerde breakpoints, trekken er .02px van af en gebruiken die als onze max-width-waarden. Bijvoorbeeld:

// `xs` levert alleen een ruleset op en geen media query
// ... { ... }

// `sm` geldt voor x-small-apparaten (telefoons staand, minder dan 576px)
@media (max-width: 575.98px) { ... }

// `md` geldt voor small-apparaten (telefoons liggend, minder dan 768px)
@media (max-width: 767.98px) { ... }

// `lg` geldt voor medium-apparaten (tablets, minder dan 992px)
@media (max-width: 991.98px) { ... }

// `xl` geldt voor large-apparaten (desktops, minder dan 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` geldt voor x-large-apparaten (grote desktops, minder dan 1400px)
@media (max-width: 1399.98px) { ... }

Eén enkel breakpoint

Er zijn ook media queries en mixins om één enkel segment van schermformaten te targeten met behulp van de minimale en maximale breakpointbreedtes.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Zo levert @include media-breakpoint-only(md) { ... } bijvoorbeeld dit op:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Tussen breakpoints

Op vergelijkbare wijze kunnen media queries meerdere breakpointbreedtes overspannen:

@include media-breakpoint-between(md, xl) { ... }

Wat dit oplevert:

// Voorbeeld
// Pas stijlen toe vanaf medium-apparaten tot en met extra large-apparaten
@media (min-width: 768px) and (max-width: 1199.98px) { ... }