Source

Grid-systeem

Gebruik ons krachtige mobile-first flexbox-raster om lay-outs in alle soorten en maten te bouwen dankzij een systeem met twaalf kolommen, vijf standaard responsieve lagen, Sass-variabelen en mixins, en tientallen vooraf gedefinieerde klassen.

Hoe het werkt

Het rastersysteem van Bootstrap gebruikt een reeks containers, rijen en kolommen om inhoud op te delen en uit te lijnen. Het is gebouwd met flexbox en is volledig responsief. Hieronder ziet u een voorbeeld en een diepgaande blik op hoe het raster tot stand komt.

Nieuw of onbekend met flexbox? Lees deze CSS Tricks flexbox-handleiding voor achtergrond, terminologie, richtlijnen en codefragmenten.

Een van de drie kolommen

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

In het bovenstaande voorbeeld worden drie kolommen van gelijke breedte gemaakt op kleine, middelgrote, grote en extra grote apparaten met behulp van onze vooraf gedefinieerde rasterklassen. Die kolommen zijn gecentreerd op de pagina met het bovenliggende .container.

Het opsplitsen, hier is hoe het werkt:

Met containers kunt u de inhoud van uw site centreren en horizontaal opvullen. Gebruik .containervoor een responsieve pixelbreedte of .container-fluidvoor width: 100%alle viewport- en apparaatformaten.
Rijen zijn wrappers voor kolommen. Elke kolom heeft een horizontale padding(goot genoemd) om de ruimte ertussen te regelen. Dit paddingwordt dan tegengegaan op de rijen met negatieve marges. Op deze manier wordt alle inhoud in uw kolommen visueel uitgelijnd aan de linkerkant.
In een rasterlay-out moet inhoud binnen kolommen worden geplaatst en mogen alleen kolommen directe onderliggende rijen zijn.
Dankzij flexbox worden rasterkolommen zonder een opgegeven widthautomatisch opgemaakt als kolommen met gelijke breedte. Bijvoorbeeld, vier instanties van .col-smzullen elk automatisch 25% breed zijn vanaf het kleine breekpunt en hoger. Zie de sectie kolommen voor automatische opmaak voor meer voorbeelden.
Kolomklassen geven het aantal kolommen aan dat u wilt gebruiken van de mogelijke 12 per rij. Dus als u drie kolommen van gelijke breedte wilt, kunt u .col-4.
Kolom widths zijn ingesteld in percentages, dus ze zijn altijd vloeiend en hebben een grootte ten opzichte van hun bovenliggende element.
Kolommen hebben horizontaal paddingom de goten tussen afzonderlijke kolommen te maken, maar u kunt de marginuit rijen en paddinguit kolommen verwijderen met .no-guttersop de .row.
Om het raster responsief te maken, zijn er vijf rasteronderbrekingspunten, één voor elk responsief breekpunt : alle breekpunten (extra klein), klein, medium, groot en extra groot.
Grid-onderbrekingspunten zijn gebaseerd op mediaquery's met een minimale breedte, wat betekent dat ze van toepassing zijn op dat ene breekpunt en al die daarboven (bijvoorbeeld van .col-sm-4toepassing op kleine, middelgrote, grote en extra grote apparaten, maar niet op het eerste xsbreekpunt).
U kunt vooraf gedefinieerde rasterklassen (zoals .col-4) of Sass-mixins gebruiken voor meer semantische opmaak.

Wees je bewust van de beperkingen en bugs rond flexbox , zoals het onvermogen om sommige HTML-elementen als flexcontainers te gebruiken .

Rasteropties

Terwijl Bootstrap ems of rems gebruikt voor het definiëren van de meeste formaten, pxworden s gebruikt voor rasteronderbrekingspunten en containerbreedten. Dit komt omdat de breedte van de viewport in pixels is en niet verandert met de lettergrootte .

Bekijk hoe aspecten van het Bootstrap-rastersysteem werken op meerdere apparaten met een handige tabel.

	Extra klein <576px	Klein ≥576px	Gemiddeld ≥768px	Groot (992px)	Extra groot (1200px)
Maximale containerbreedte	Geen (automatisch)	540px	720px	960px	1140px
Klasse voorvoegsel	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolommen	12
breedte van de goot	30px (15px aan elke kant van een kolom)
Nestbaar	Ja
Kolomvolgorde	Ja

Kolommen voor automatische opmaak

Gebruik breekpuntspecifieke kolomklassen voor eenvoudige kolomgrootte zonder een expliciete genummerde klasse zoals .col-sm-6.

gelijke breedte

Hier zijn bijvoorbeeld twee rasterlay-outs die van toepassing zijn op elk apparaat en kijkvenster, van xstot xl. Voeg een willekeurig aantal eenheidsloze klassen toe voor elk breekpunt dat u nodig hebt en elke kolom zal dezelfde breedte hebben.

1 van de 2

2 van 2

1 van 3

2 van 3

3 van 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kolommen van gelijke breedte kunnen worden opgedeeld in meerdere regels, maar er was een Safari flexbox-bug waardoor dit niet werkte zonder een expliciete flex-basisof border. Er zijn oplossingen voor oudere browserversies, maar deze zouden niet nodig moeten zijn als u up-to-date bent.

Kolom

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Eén kolombreedte instellen

Automatische lay-out voor flexbox-rasterkolommen betekent ook dat u de breedte van één kolom kunt instellen en dat de kolommen van de zusterkolommen er automatisch omheen kunnen worden vergroot. U kunt vooraf gedefinieerde rasterklassen (zoals hieronder weergegeven), rastermixins of inline-breedten gebruiken. Merk op dat de grootte van de andere kolommen zal veranderen, ongeacht de breedte van de middelste kolom.

1 van 3

2 van 3 (breder)

3 van 3

1 van 3

2 van 3 (breder)

3 van 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variabele breedte inhoud

Gebruik col-{breakpoint}-autoklassen om kolommen te rangschikken op basis van de natuurlijke breedte van hun inhoud.

1 van 3

Variabele breedte inhoud

3 van 3

1 van 3

Variabele breedte inhoud

3 van 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Gelijke breedte meerdere rijen

Maak kolommen van gelijke breedte die meerdere rijen beslaan door een in te voegen .w-100waar u wilt dat de kolommen op een nieuwe regel eindigen. Maak de pauzes responsief door de te mengen .w-100met enkele responsieve weergavehulpprogramma's .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Responsieve lessen

Het raster van Bootstrap bevat vijf niveaus van vooraf gedefinieerde klassen voor het bouwen van complexe responsieve lay-outs. Pas de grootte van uw kolommen aan op extra kleine, kleine, middelgrote, grote of extra grote apparaten, zoals u dat wilt.

Alle breekpunten

Voor rasters die hetzelfde zijn van de kleinste apparaten tot de grootste, gebruikt u de .colen .col-*klassen. Geef een genummerde klasse op wanneer u een kolom met een bijzonder formaat nodig hebt; blijf anders gerust bij .col.

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Gestapeld naar horizontaal

Met behulp van een enkele set .col-sm-*klassen kunt u een basisrastersysteem maken dat gestapeld begint voordat het horizontaal wordt met bij het kleine breekpunt ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mix en match

Wilt u niet dat uw kolommen eenvoudig in een aantal rasterlagen worden gestapeld? Gebruik indien nodig een combinatie van verschillende klassen voor elke laag. Zie het onderstaande voorbeeld voor een beter idee van hoe het allemaal werkt.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Uitlijning

Gebruik flexbox-uitlijnhulpprogramma's om kolommen verticaal en horizontaal uit te lijnen.

Verticale uitlijning

Een van de drie kolommen

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Een van de drie kolommen

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontale uitlijning

Een van de twee kolommen

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Geen goten

De goten tussen kolommen in onze vooraf gedefinieerde rasterklassen kunnen worden verwijderd met .no-gutters. Dit verwijdert de negatieve margins van .rowen de horizontale paddingvan alle directe onderliggende kolommen.

Hier is de broncode voor het maken van deze stijlen. Houd er rekening mee dat kolomoverschrijvingen alleen betrekking hebben op de eerste onderliggende kolommen en worden getarget via attribuutselector . Hoewel dit een meer specifieke selector genereert, kan kolomopvulling nog verder worden aangepast met spatiëringshulpprogramma's .

Een edge-to-edge ontwerp nodig? Laat de ouder vallen .containerof .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

In de praktijk ziet het er zo uit. Merk op dat u dit kunt blijven gebruiken met alle andere vooraf gedefinieerde rasterklassen (inclusief kolombreedten, responsieve lagen, herschikkingen en meer).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Kolomterugloop

Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.

.col-9

.col-4
Aangezien 9 + 4 = 13 > 12, wordt deze 4-koloms brede div als één aaneengesloten eenheid op een nieuwe regel gewikkeld.

.col-6
Volgende kolommen gaan verder langs de nieuwe regel.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Kolomeinden

Het afbreken van kolommen naar een nieuwe regel in flexbox vereist een kleine hack: voeg een element toe met width: 100%waar u uw kolommen naar een nieuwe regel wilt wikkelen. Normaal gesproken wordt dit bereikt met meerdere .rows, maar niet elke implementatiemethode kan hier rekening mee houden.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

U kunt deze onderbreking ook toepassen op specifieke onderbrekingspunten met onze hulpprogramma's voor responsieve weergave .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Opnieuw ordenen

Bestel lessen

Gebruik .order-klassen om de visuele volgorde van uw inhoud te bepalen. Deze klassen zijn responsief, dus u kunt het orderby-breakpoint instellen (bijv. .order-1.order-md-2). Bevat ondersteuning voor 1alle 12vijf rasterlagen.

Eerst, maar ongeordend

Tweede, maar laatste

Derde, maar eerst

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Er zijn ook responsieve klassen .order-firsten .order-lastklassen die het orderelement van een element wijzigen door respectievelijk order: -1en order: 13( order: $columns + 1) toe te passen. Deze klassen kunnen indien nodig ook worden vermengd met de genummerde .order-*klassen.

Eerst, maar als laatste

Ten tweede, maar ongeordend

Derde, maar eerst

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Kolommen compenseren

U kunt rasterkolommen op twee manieren verschuiven: onze responsieve .offset-rasterklassen en onze margehulpprogramma's . De grootte van rasterklassen is afgestemd op kolommen, terwijl marges nuttiger zijn voor snelle lay-outs waarbij de breedte van de offset variabel is.

Offset klassen

Verplaats kolommen naar rechts met behulp van .offset-md-*klassen. Deze klassen vergroten de linkermarge van een kolom met *kolommen. .offset-md-4Beweegt bijvoorbeeld .col-md-4over vier kolommen.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Naast het wissen van kolommen bij responsieve onderbrekingspunten, moet u mogelijk de offsets opnieuw instellen. Zie dit in actie in het rastervoorbeeld .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Marge-hulpprogramma's

Met de overstap naar flexbox in v4, kunt u margehulpprogramma's gebruiken .mr-autoom kolommen van broers en zussen van elkaar af te dwingen.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Nesten

Als u uw inhoud wilt nesten met het standaardraster, voegt u een nieuwe .rowen een reeks .col-sm-*kolommen toe binnen een bestaande .col-sm-*kolom. Geneste rijen moeten een set kolommen bevatten die optellen tot 12 of minder (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt).

Niveau 1: .col-sm-9

Niveau 2: .col-8 .col-sm-6

Niveau 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass mixins

Wanneer u de Sass-bronbestanden van Bootstrap gebruikt, hebt u de mogelijkheid om Sass-variabelen en mixins te gebruiken om aangepaste, semantische en responsieve paginalay-outs te maken. Onze vooraf gedefinieerde rasterklassen gebruiken dezelfde variabelen en mixins om een hele reeks kant-en-klare klassen te bieden voor snel reagerende lay-outs.

Variabelen

Variabelen en kaarten bepalen het aantal kolommen, de gootbreedte en het mediaquerypunt waarop zwevende kolommen moeten beginnen. We gebruiken deze om de vooraf gedefinieerde rasterklassen te genereren die hierboven zijn gedocumenteerd, evenals voor de aangepaste mixins die hieronder worden vermeld.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins worden gebruikt in combinatie met de rastervariabelen om semantische CSS voor individuele rasterkolommen te genereren.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Voorbeeld gebruik

U kunt de variabelen wijzigen in uw eigen aangepaste waarden of gewoon de mixins gebruiken met hun standaardwaarden. Hier is een voorbeeld van het gebruik van de standaardinstellingen om een lay-out met twee kolommen te maken met een tussenruimte.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Belangrijkste inhoud

Secundaire inhoud

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Het raster aanpassen

Met behulp van onze ingebouwde Sass-variabelen en kaarten voor rasters is het mogelijk om de vooraf gedefinieerde rasterklassen volledig aan te passen. Wijzig het aantal lagen, de afmetingen van de mediaquery's en de containerbreedten en compileer vervolgens opnieuw.

Kolommen en goten

Het aantal rasterkolommen kan worden gewijzigd via Sass-variabelen. $grid-columnswordt gebruikt om de breedtes (in procenten) van elke afzonderlijke kolom te genereren, terwijl breekpuntspecifieke breedtes mogelijk zijn die gelijkmatig over en voor de kolomgoten $grid-gutter-widthworden verdeeld .padding-leftpadding-right

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Rasterlagen

Als u verder gaat dan de kolommen zelf, kunt u ook het aantal rasterlagen aanpassen. Als je slechts vier rasterlagen wilt, zou je de $grid-breakpointsen bijwerken $container-max-widthsnaar zoiets als dit:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wanneer u wijzigingen aanbrengt in de Sass-variabelen of -kaarten, moet u uw wijzigingen opslaan en opnieuw compileren. Als u dit doet, wordt een geheel nieuwe set vooraf gedefinieerde rasterklassen voor kolombreedten, offsets en volgorde weergegeven. Hulpprogramma's voor responsieve zichtbaarheid worden ook bijgewerkt om de aangepaste onderbrekingspunten te gebruiken. Zorg ervoor dat u rasterwaarden instelt in px(niet rem, em, of %).