Bootstrap 5.2 / Utilities

Display-eigenschap

Schakel de display-waarde van componenten en meer snel en responsief met onze display-utilities. Inclusief ondersteuning voor een aantal van de gangbaardere waarden, plus wat extra's om display bij het afdrukken te sturen.

Hoe het werkt

Wijzig de waarde van de display-eigenschap met onze responsieve display-utility-klassen. We ondersteunen bewust slechts een deel van alle mogelijke waarden voor display. Klassen kunnen naar behoefte worden gecombineerd voor uiteenlopende effecten.

Notatie

Display-utility-klassen 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 daarom als volgt benoemd:

.d-{value} voor xs
.d-{breakpoint}-{value} voor sm, md, lg, xl en xxl.

Waarbij value een van deze is:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

De display-waarden kunnen worden aangepast door de display-waarden in $utilities te wijzigen en de SCSS opnieuw te compileren.

De media queries gelden voor schermbreedtes met het gegeven breakpoint of groter. Zo zet .d-lg-none display: none; op lg-, xl- en xxl-schermen.

Voorbeelden

HTML

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

HTML

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Elementen verbergen

Voor snellere mobielvriendelijke ontwikkeling gebruik je responsieve display-klassen om elementen per apparaat te tonen en te verbergen. Vermijd het maken van compleet verschillende versies van dezelfde site; verberg elementen in plaats daarvan responsief per schermformaat.

Om elementen te verbergen gebruik je gewoon de klasse .d-none of een van de .d-{sm,md,lg,xl,xxl}-none-klassen voor elke responsieve schermvariant.

Om een element alleen binnen een bepaald bereik van schermformaten te tonen, kun je een .d-*-none-klasse combineren met een .d-*-*-klasse; zo verbergt .d-none .d-md-block .d-xl-none .d-xxl-none het element op alle schermformaten behalve op medium en large apparaten.

Schermformaat	Klasse
Overal verborgen	`.d-none`
Alleen verborgen op xs	`.d-none .d-sm-block`
Alleen verborgen op sm	`.d-sm-none .d-md-block`
Alleen verborgen op md	`.d-md-none .d-lg-block`
Alleen verborgen op lg	`.d-lg-none .d-xl-block`
Alleen verborgen op xl	`.d-xl-none`
Alleen verborgen op xxl	`.d-xxl-none .d-xxl-block`
Overal zichtbaar	`.d-block`
Alleen zichtbaar op xs	`.d-block .d-sm-none`
Alleen zichtbaar op sm	`.d-none .d-sm-block .d-md-none`
Alleen zichtbaar op md	`.d-none .d-md-block .d-lg-none`
Alleen zichtbaar op lg	`.d-none .d-lg-block .d-xl-none`
Alleen zichtbaar op xl	`.d-none .d-xl-block .d-xxl-none`
Alleen zichtbaar op xxl	`.d-none .d-xxl-block`

HTML

<div class="d-lg-none">verbergen op lg en bredere schermen</div>
<div class="d-none d-lg-block">verbergen op schermen kleiner dan lg</div>

Display bij afdrukken

Wijzig de display-waarde van elementen bij het afdrukken met onze print-display-utility-klassen. Bevat ondersteuning voor dezelfde display-waarden als onze responsieve .d-*-utilities.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

De print- en display-klassen kunnen worden gecombineerd.

HTML

<div class="d-print-none">Alleen scherm (alleen bij afdrukken verbergen)</div>
<div class="d-none d-print-block">Alleen afdruk (alleen op scherm verbergen)</div>
<div class="d-none d-lg-block d-print-block">Tot large verbergen op scherm, maar altijd tonen bij afdrukken</div>

Sass

Utilities-API

Display-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.