Die Anleitung zu Bootstrap Visibility Utility

Im CSS gibt es 2 Maßnahmen damit Sie ein Element verstecken:

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

Jetzt werde ich den Unterschied zwischen 2 obengemeinten Maßnahmen erklären.

{display: none}

{display: none} macht das Element verstecken, gleichzeitig befreit den durch Element besetzten Raum. D.h Nachdem das Element versteckt wird, können die anderen Elementen ihren Raum besetzen.

{visibility: hidden}

{visibility: hidden} macht das Element verstecken, aber es befreit den durch Element besetzten Raum nicht

Wenn das Element durch {visibility: hidden} versteckt wird, sollen Sie {visibility: visible} verwenden um es wieder anzuzeigen.

Bootstrap Visibility

Statt von der Verwendung von CSS {visibility: hidden} & {visibility: visible} gibt Bootstrap Ihnen 2 Klasse .invisible & .visible:

// Class
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}