Principe

L'objectif est de modifier la propriété CSS display en fonction des besoins.
Ces possibilités se combinent avec les breakpoints du framework.

Les classes sont nommées suivant ce format :

  • .d-{value} : à partir de xs et +
  • .d-{breakpoint}-{value} pour les devices sm, md, lg, xl et xxl.

La value provient de cette liste :

  • none
  • inline
  • inline-block
  • block
  • grid
  • inline-grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex
Exemple
d-inline
d-inline
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-block d-block 
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Hiding elements

Il est possible de jouer rapidement sur l'affichage / masquage d'éléments entre les différents devices.
Pour masquer, on utilise la classe .d-none ou ses copines responsives .d-{sm,md,lg,xl}-none.
Il faut raisonner du plus petit au plus grand. Voici quelques combinaisons possibles :

Taille de l'écran Classe
Caché sur tous .d-none
Caché uniquement sur XS .d-none .d-sm-block
Caché uniquement sur SM .d-sm-none .d-md-block
Caché uniquement sur MD .d-md-none .d-lg-block
Caché uniquement sur LG .d-lg-none .d-xl-block
Disponible uniquement sur XL .d-xl-none .d-xxl-block
Disponible uniquement sur XXL .d-xxl-none
Visible sur tous .d-block
Visible uniquement sur XS .d-block .d-sm-none
Visible uniquement sur SM .d-none .d-sm-block .d-md-none
Visible uniquement sur MD .d-none .d-md-block .d-lg-none
Visible uniquement sur LG .d-none .d-lg-block .d-xl-none
Visible uniquement sur XL .d-none .d-xl-block .d-xxl-none
Visible uniquement sur XXL .d-none .d-xxl-block
Exemple
hide on lg and wider screens
hide on screens smaller than lg
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Quid du print ?

Il est possible de gérer des display dédiés au print. L'idée est d'indiquer à un élément comment se comporter en version print vs la version screen.

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

On peut imaginer de masquer des éléments en version screen et de les afficher en version print.

Exemple
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>