Skip to Content
BootstrapPartie 7 — Utilitaires & Utility API7.3 — Display, flex & position

7.3 — Display, flex & position

⏱️ TL;DR — d-* contrôle display (d-none, d-block, d-flex, d-inline, d-grid…) et est responsive (d-none d-md-block = caché sur mobile). Les utilitaires flex (vus en 2.5) et de position (position-*, top-0…) complètent la panoplie. d-print-* cible l’impression.

🎯 Objectifs

  • Afficher/masquer selon le breakpoint.
  • Passer un conteneur en flex ou grid.
  • Gérer l’affichage à l’impression.

Display

<div class="d-none">jamais affiché</div>
<div class="d-block">block</div>
<div class="d-inline">inline</div>
<div class="d-flex">flex</div>
<div class="d-grid">grid</div>

Valeurs : none, inline, inline-block, block, grid, inline-grid, table, flex, inline-flex.

Responsive : montrer/masquer

<!-- visible seulement à partir de md -->
<div class="d-none d-md-block">Desktop only</div>
 
<!-- visible seulement en dessous de md -->
<div class="d-block d-md-none">Mobile only</div>

Le motif « caché puis affiché » est la base du responsive : on empile deux classes d-* à des breakpoints différents.

Boutons en pile (d-grid)

<div class="d-grid gap-2">
  <button class="btn btn-primary">Bloc 1</button>
  <button class="btn btn-primary">Bloc 2</button>
</div>
 
<!-- pleine largeur sur mobile, auto dès md -->
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary">Action</button>
</div>

d-grid transforme des boutons en blocs pleine largeur empilés — plus propre que w-100 répété.

Impression

<div class="d-print-none">Masqué à l'impression</div>
<div class="d-none d-print-block">Visible seulement à l'impression</div>

Overflow, visibility

<div class="overflow-auto" style="height:100px">défile</div>
<div class="overflow-hidden">rogné</div>
<div class="invisible">occupe l'espace mais invisible</div>
<div class="visible">visible</div>

⚠️ Piège — d-none retire l’élément du flux (comme display:none) : il n’est plus lu par les lecteurs d’écran. Pour masquer visuellement mais garder accessible, utilisez visually-hidden. Pour occuper l’espace sans afficher, invisible.

💡 Pour un dev React — En React, on conditionne souvent le rendu ({isMobile && …}), mais d-none d-md-block évite un re-render au resize et fonctionne côté serveur (SSR) sans JS. Pour du responsive purement visuel, préférez les classes d-* aux media queries JS.

✏️ Exercices

  1. Afficher un lien « Menu » uniquement sur mobile.

✅ Solution

<a class="d-block d-lg-none">Menu</a> (visible en dessous de lg).

  1. Deux boutons empilés pleine largeur sur mobile, côte à côte à droite dès md.

✅ Solution

<div class="d-grid gap-2 d-md-flex justify-content-md-end">…</div>.

🧠 Quiz de révision

1. Que fait d-none d-md-block ?

Caché en dessous de md, affiché (block) à partir de md.

2. Quelle classe pour masquer un élément à l’impression ?

d-print-none.

3. Différence entre d-none et invisible ?

d-none retire du flux ; invisible garde l’espace mais rend transparent.

4. Comment empiler des boutons pleine largeur proprement ?

d-grid gap-2.

5. Comment masquer visuellement en gardant l’accès aux lecteurs d’écran ?

visually-hidden.

Chapitre suivant : 7.4 — Bordures, ombres & divers

7.2 — Couleurs (texte & fond)7.4 — Bordures, ombres & divers