Utilitaires

Affichage

Les classes d-* règlent la propriété CSS display. Avec leurs variantes responsives et d’impression, elles montrent, masquent ou transforment un élément selon la largeur de l’écran ou le support.

Valeurs courantes#

Les éléments en ligne se placent côte à côte ; les éléments en bloc occupent toute la largeur.

d-inline d-inline

d-block

d-inline-block

<div class="bg-body-secondary border p-3">
  <span class="d-inline bg-body border p-2">d-inline</span>
  <span class="d-inline bg-body border p-2">d-inline</span>
</div>
<div class="bg-body-secondary border p-3 mt-3">
  <div class="d-block bg-body border p-2 mb-2">d-block</div>
  <div class="d-block bg-body border p-2">d-block</div>
</div>
<div class="bg-body-secondary border p-3 mt-3">
  <div class="d-inline-block bg-body border p-2">d-inline-block</div>
  <div class="d-inline-block bg-body border p-2">d-inline-block</div>
</div>

Flex et grille#

d-flex

en ligne

d-grid

en colonne

<div class="d-flex gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2">d-flex</div>
  <div class="bg-body border p-2">en ligne</div>
</div>
<div class="d-grid gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2">d-grid</div>
  <div class="bg-body border p-2">en colonne</div>
</div>

Masquer un élément#

d-none retire l’élément de la page : il n’occupe plus de place et n’est plus lu par les lecteurs d’écran.

Cet élément reste visible.

<div class="bg-body-secondary border p-3">
  <div class="d-none">Caché sur toutes les largeurs.</div>
  <div class="bg-body border p-2">Cet élément reste visible.</div>
</div>

Afficher selon la largeur#

Cachez d’abord avec d-none, puis affichez à partir d’un point de rupture. Redimensionnez la fenêtre pour voir l’effet.

Visible sous 768 px : menu compact

Visible de 768 à 991 px

Visible à partir de 992 px : menu complet

<div class="bg-body-secondary border p-3">
  <div class="d-block d-md-none bg-body border p-2 mb-2">Visible sous 768 px : menu compact</div>
  <div class="d-none d-md-block d-lg-none bg-body border p-2 mb-2">Visible de 768 à 991 px</div>
  <div class="d-none d-lg-block bg-body border p-2">Visible à partir de 992 px : menu complet</div>
</div>

Changer la disposition selon la largeur#

Ici, les deux blocs s’empilent sur mobile puis passent côte à côte à partir de 768 px.

Compte courant

Compte épargne

<div class="d-block d-md-flex gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2 mb-2 mb-md-0 flex-fill">Compte courant</div>
  <div class="bg-body border p-2 flex-fill">Compte épargne</div>
</div>

Impression#

Les classes d-print-* s’appliquent uniquement à l’impression. Utilisez-les pour retirer les boutons d’un relevé ou n’afficher que les informations utiles.

Relevé de compte du mois de mars.

Document édité par la BDU CI.

<div class="bg-body-secondary border p-3">
  <p class="mb-2">Relevé de compte du mois de mars.</p>
  <button type="button" class="btn btn-primary d-print-none">Imprimer le relevé</button>
  <p class="d-none d-print-block mb-0">Document édité par la BDU CI.</p>
</div>

Classes de base

Classes de base
Classe	Valeur de `display`
`d-none`	`none`
`d-inline`	`inline`
`d-inline-block`	`inline-block`
`d-block`	`block`
`d-grid`	`grid`
`d-inline-grid`	`inline-grid`
`d-table`	`table`
`d-table-row`	`table-row`
`d-table-cell`	`table-cell`
`d-flex`	`flex`
`d-inline-flex`	`inline-flex`

Variantes responsives et impression

Chaque valeur existe avec les suffixes -sm, -md, -lg, -xl et -xxl placés après d : d-md-none, d-lg-flex, d-xxl-table-cell… Les variantes d’impression se terminent par -print.

Variantes responsives et impression
Famille	Classes
Aucun suffixe	`d-none` `d-block` `d-flex` `d-inline` `d-inline-block` `d-inline-flex` `d-grid` `d-inline-grid` `d-table` `d-table-row` `d-table-cell`
`-sm`	`d-sm-none` `d-sm-block` `d-sm-flex` `d-sm-inline` `d-sm-inline-block` `d-sm-inline-flex` `d-sm-grid` `d-sm-inline-grid` `d-sm-table` `d-sm-table-row` `d-sm-table-cell`
`-md`	`d-md-none` `d-md-block` `d-md-flex` `d-md-inline` `d-md-inline-block` `d-md-inline-flex` `d-md-grid` `d-md-inline-grid` `d-md-table` `d-md-table-row` `d-md-table-cell`
`-lg`	`d-lg-none` `d-lg-block` `d-lg-flex` `d-lg-inline` `d-lg-inline-block` `d-lg-inline-flex` `d-lg-grid` `d-lg-inline-grid` `d-lg-table` `d-lg-table-row` `d-lg-table-cell`
`-xl`	`d-xl-none` `d-xl-block` `d-xl-flex` `d-xl-inline` `d-xl-inline-block` `d-xl-inline-flex` `d-xl-grid` `d-xl-inline-grid` `d-xl-table` `d-xl-table-row` `d-xl-table-cell`
`-xxl`	`d-xxl-none` `d-xxl-block` `d-xxl-flex` `d-xxl-inline` `d-xxl-inline-block` `d-xxl-inline-flex` `d-xxl-grid` `d-xxl-inline-grid` `d-xxl-table` `d-xxl-table-row` `d-xxl-table-cell`
Impression	`d-print-none` `d-print-block` `d-print-flex` `d-print-inline` `d-print-inline-block` `d-print-inline-flex` `d-print-grid` `d-print-inline-grid` `d-print-table` `d-print-table-row` `d-print-table-cell`

Plages de visibilité courantes

Plages de visibilité courantes
Objectif	Classes
Caché partout	`d-none`
Visible partout	`d-block`
Caché uniquement sous 576 px	`d-none d-sm-block`
Caché uniquement de 576 à 767 px	`d-sm-none d-md-block`
Caché uniquement de 768 à 991 px	`d-md-none d-lg-block`
Visible uniquement sous 768 px	`d-block d-md-none`
Visible uniquement de 768 à 991 px	`d-none d-md-block d-lg-none`
Visible à partir de 1 200 px	`d-none d-xl-block`
Caché à l’impression	`d-print-none`
Visible seulement à l’impression	`d-none d-print-block`

Suffixes responsives

Les classes responsives s’appliquent à partir de la largeur indiquée et au-dessus (approche mobile d’abord). Sans suffixe, la classe vaut pour toutes les largeurs.

Suffixes responsives
Suffixe	Largeur minimale	Exemple
(aucun)	0	`d-block`
`-sm`	576 px	`d-sm-block`
`-md`	768 px	`d-md-block`
`-lg`	992 px	`d-lg-block`
`-xl`	1 200 px	`d-xl-block`
`-xxl`	1 400 px	`d-xxl-block`

Variables Sass

Variables Sass
Variable	Rôle
`$utilities` (clé `"display"`)	Définit les valeurs, l’option `responsive: true` et l’option `print: true`. Modifiez la liste `values` pour ajouter ou retirer un affichage.
`$grid-breakpoints`	Largeurs des suffixes responsives.
`$enable-important-utilities`	Ajoute `!important` à chaque classe `d-*`.

Bonnes pratiques

À faire

Pensez mobile d’abord : écrivez la règle de base, puis la variante qui s’applique à partir d’un point de rupture.
Gardez le même contenu essentiel sur toutes les largeurs : masquez ce qui est redondant, pas ce qui est nécessaire.
Pour du texte réservé aux lecteurs d’écran, utilisez visually-hidden (page Aides, « Visuellement masqué ») plutôt que d-none.

À éviter

N’empilez pas d-none et d-block sans suffixe sur un même élément : l’ordre des règles décide, pas celui des classes.
Ne masquez pas avec d-none un lien ou un bouton indispensable sur mobile.
Ne dupliquez pas un grand bloc entier pour le montrer à deux largeurs : cela double le contenu pour les lecteurs d’écran qui le lisent encore.

Accessibilité

d-none retire l’élément de l’arbre d’accessibilité : un lecteur d’écran ne le lit pas, et le clavier ne peut plus l’atteindre.
Un contenu dupliqué en deux versions (mobile et ordinateur) ne doit exister qu’une fois à chaque largeur, sans quoi il sera lu deux fois.
Vérifiez l’ordre de tabulation après avoir masqué ou fait apparaître des éléments selon la largeur.