Les classes display de Bootstrap 5

Qu’est-ce que les classes display de Bootstrap ?

Les classes display de Bootstrap 5 te permettent de gérer facilement l’affichage (visible ou caché) des éléments sur une page web. Ces classes ajoutent ou retirent les règles CSS nécessaires pour modifier la propriété display des éléments.

Deux classes de base :

1. .d-none : Cache complètement l’élément (équivalent à display: none; en CSS).
2. .d-block : Affiche l’élément comme un bloc (équivalent à display: block; en CSS).

Exemples simples

<div class="d-none">Cet élément est caché</div>
<div class="d-block">Cet élément est visible en bloc</div>

Les variantes responsives

Avec Bootstrap, tu peux appliquer ces classes conditionnellement en fonction de la largeur de l’écran. Les variantes responsives utilisent les points de rupture 🇬🇧 break pointssuivants :

• sm : Petits écrans (≥576px)
• md : Écrans moyens (≥768px)
• lg : Grands écrans (≥992px)
• xl : Très grands écrans (≥1200px)
• xxl : Immenses écrans (≥1400px)

Syntaxe des variantes

Pour utiliser une variante responsive, ajoute le point de rupture après .d- suivi de la valeur souhaitée (par exemple, none, block, etc.). Voici la structure générale :

.d-{point_de_rupture}-{valeur}

Exemples :

• .d-sm-none : Cache l’élément sur les écrans petits et plus grands.
• .d-lg-block : Affiche l’élément comme un bloc uniquement sur les grands écrans.

Exemples pratiques

Exemple 1 : Cacher un élément selon la taille de l’écran

<div class="d-none d-sm-block">
  Je suis visible uniquement sur les écrans ≥576px.
</div>

Explication :

• .d-none : Cache l’élément par défaut.
• .d-sm-block : L’élément devient visible en mode bloc pour les écrans ≥576px.

Exemple 2 : Alterner la visibilité entre mobile et desktop

<div class="d-block d-md-none">
  Je suis visible sur les écrans <768px.
</div>
<div class="d-none d-md-block">
  Je suis visible sur les écrans ≥768px.
</div>

Explication :

• Sur les petits écrans (mobile), le premier élément est visible (.d-block) et le second est caché (.d-none).
• Sur les écrans ≥768px (desktop), c’est l’inverse.

Bonnes pratiques

1. Privilégie les classes responsives : Utilise-les pour améliorer l’expérience utilisateur sur différents appareils.
2. Teste les affichages : Avec les outils de développement des navigateurs, vérifie que les classes s’appliquent correctement à chaque point de rupture.
3. Évite de mélanger plusieurs styles d’affichage directement en CSS et via Bootstrap, pour garder un code cohérent et facile à maintenir.

À retenir

1. .d-none : Cache un élément (équivalent à display: none).
2. .d-block : Affiche un élément comme un bloc (équivalent à display: block).
3. Points de rupture responsives :
   • .d-{valeur}-{point_de_rupture} pour des affichages adaptés aux différentes tailles d’écran.
4. Teste toujours tes affichages responsives pour t'assurer qu'ils fonctionnent comme prévu.

Exercice :
Crée une page HTML avec un élément caché par défaut sur mobile, mais visible en bloc pour les écrans ≥576px.