Utilitaires

Visibilité

Les classes visible et invisible changent la visibilité d’un élément sans modifier la mise en page : l’espace qu’il occupe est conservé.

Visible et invisible#

Un élément invisible garde sa place, et n’est plus lu par les technologies d’assistance. Comparez avec d-none, qui retire aussi l’espace.

Visible Invisible Suivant (la place du badge invisible est conservée)

<div class="bg-body-secondary border p-3 d-flex gap-3 align-items-center">
  <span class="visible badge text-bg-primary">Visible</span>
  <span class="invisible badge text-bg-primary">Invisible</span>
  <span class="badge text-bg-success">Suivant (la place du badge invisible est conservée)</span>
</div>

Classes et propriété

Ces classes ne sont pas déclinées par point de rupture. Pour masquer selon la largeur, utilisez les classes d-* de la page Affichage.

Classes et propriété
Classe	Propriété CSS	Effet
`visible`	`visibility: visible`	L’élément est affiché.
`invisible`	`visibility: hidden`	L’élément est caché mais garde sa place. Il est aussi retiré de l’arbre d’accessibilité.

Quelle classe pour quel besoin

Quelle classe pour quel besoin
Besoin	Solution
Cacher en gardant l’espace	`invisible`
Cacher et libérer l’espace	`d-none` (voir Affichage)
Cacher selon la largeur de l’écran	`d-none d-md-block` et variantes
Cacher visuellement mais garder pour les lecteurs d’écran	`visually-hidden` (voir Visuellement masqué)
Rendre transparent mais cliquable et lisible	`opacity-0` (voir Opacité)

Bonnes pratiques

À faire

Utilisez invisible pour éviter qu’une mise en page saute quand un élément apparaît (par exemple un message de validation).
Basculez entre visible et invisible avec JavaScript plutôt que de modifier le style en ligne.

À éviter

N’utilisez pas invisible pour un texte destiné aux lecteurs d’écran : il est ignoré. Utilisez visually-hidden.
Ne comptez pas sur opacity-0 pour cacher un champ ou un bouton : il reste actif au clavier.

Accessibilité

Un élément invisible ne reçoit plus le focus et n’est plus annoncé : c’est le comportement voulu pour un contenu inactif.
Le contenu masqué ne doit pas rester seul porteur d’une information indispensable.