Le Tutoriel de Bootstrap Visibility Utility

En CSS il y a deux manières de cacher un élément :

1. Utilisez CSS Property: {display: none}.
2. Utilisez​​​​​​​  CSS Property: {visibility: hidden}.

Maitenant je vous donnerai des explications sur la différence entre ces deux manières.

{display: none}

{display: none} cache l'élément et libère l'espace occupé par l'élément. Cela signifie qu'une fois l'élément est caché, d'autres éléments peuvent occuper son espace.

{visibility: hidden}

{visibility: hidden} va cacher l'élément mais ne libère pas l'espace occupé par l'élément.

Si l'élément est caché par {visibility: hidden} pour l'afficher de nouveau, vous devez utiliser  {visibility: visible}.

Bootstrap Visibility

Au lieu d'utiliser CSS {visibility: hidden} & {visibility: visible}, Bootstrap vous fournit deux classes .invisible & .visible :

// Class
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}