Bootstrap 5.2 / Utilities

Spacing

Bootstrap bevat een breed scala aan beknopte, responsieve utility-klassen voor margin, padding en gap om het uiterlijk van een element aan te passen.

Margin en padding

Ken met beknopte klassen responsieve margin- of padding-waarden toe aan een element of aan een deel van de zijden ervan. Bevat ondersteuning voor individuele eigenschappen, alle eigenschappen, en verticale en horizontale eigenschappen. Klassen worden opgebouwd uit een standaard Sass-map die van .25rem tot 3rem loopt.

Let op

Gebruik je de CSS Grid layout-module? Overweeg dan de gap-utility te gebruiken.

Notatie

Spacing-utilities die voor alle breakpoints gelden, van xs tot xxl, bevatten geen breakpoint-afkorting. Dat komt doordat die klassen vanaf min-width: 0 en hoger worden toegepast en dus niet aan een media query gebonden zijn. De overige breakpoints bevatten wél een breakpoint-afkorting.

De klassen worden benoemd volgens het formaat {property}{sides}-{size} voor xs en {property}{sides}-{breakpoint}-{size} voor sm, md, lg, xl en xxl.

Waarbij property een van deze is:

m — voor klassen die margin instellen
p — voor klassen die padding instellen

Waarbij sides een van deze is:

t — voor klassen die margin-top of padding-top instellen
b — voor klassen die margin-bottom of padding-bottom instellen
s — (start) voor klassen die margin-left of padding-left instellen in LTR, en margin-right of padding-right in RTL
e — (end) voor klassen die margin-right of padding-right instellen in LTR, en margin-left of padding-left in RTL
x — voor klassen die zowel *-left als *-right instellen
y — voor klassen die zowel *-top als *-bottom instellen
leeg — voor klassen die een margin of padding op alle 4 de zijden van het element instellen

Waarbij size een van deze is:

0 — voor klassen die de margin of padding op 0 zetten
1 — (standaard) voor klassen die de margin of padding op $spacer * .25 zetten
2 — (standaard) voor klassen die de margin of padding op $spacer * .5 zetten
3 — (standaard) voor klassen die de margin of padding op $spacer zetten
4 — (standaard) voor klassen die de margin of padding op $spacer * 1.5 zetten
5 — (standaard) voor klassen die de margin of padding op $spacer * 3 zetten
auto — voor klassen die de margin op auto zetten

(Je kunt meer formaten toevoegen door items aan de Sass-mapvariabele $spacers toe te voegen.)

Voorbeelden

Hier zijn een paar representatieve voorbeelden van deze klassen:

SCSS

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Horizontaal centreren

Daarnaast bevat Bootstrap ook een .mx-auto-klasse om block-content met een vaste breedte horizontaal te centreren — dat wil zeggen content met display: block en een ingestelde width — door de horizontale marges op auto te zetten.

Gecentreerd element

HTML

<div class="mx-auto" style="width: 200px;">
  Gecentreerd element
</div>

Negatieve marge

In CSS kunnen margin-eigenschappen negatieve waarden hebben (padding niet). Deze negatieve marges staan standaard uit, maar kunnen in Sass worden ingeschakeld door $enable-negative-margins: true in te stellen.

De syntaxis is bijna gelijk aan die van de standaard positieve margin-utilities, met daarbij een n vóór het gevraagde formaat. Hier is een voorbeeldklasse die het tegenovergestelde van .mt-1 is:

SCSS

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap

Bij gebruik van display: grid kun je gap-utilities toepassen op de bovenliggende grid-container. Dat scheelt het toevoegen van margin-utilities aan losse grid-items (kinderen van een display: grid-container). Gap-utilities zijn standaard responsief en worden gegenereerd via onze utilities-API, op basis van de Sass-map $spacers.

HTML

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid-item 1</div>
  <div class="p-2 bg-light border">Grid-item 2</div>
  <div class="p-2 bg-light border">Grid-item 3</div>
</div>

De ondersteuning omvat responsieve opties voor alle grid-breakpoints van Bootstrap, plus zes formaten uit de $spacers-map (0–5). Er is geen .gap-auto-utility-klasse, omdat die feitelijk hetzelfde is als .gap-0.

Sass

Maps

Spacing-utilities worden via een Sass-map gedeclareerd en daarna met onze utilities-API gegenereerd.

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

Utilities-API

Spacing-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

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