Руководство Bootstrap Visibility Utility

В CSS если 2 способа скрытия элемента для вас:

1. Использовать CSS Property: {display: none}.
2. Использовать CSS Property: {visibility: hidden}.

Теперь я объясню разницу между 2-мя способами выше.

{display: none} скроет элемент, в то же время освобождает пространство занимающее элементом. Это означает, что после скрытия элемента, другие элементы могут занять его пространство.

{visibility: hidden} скроет элемент, но не освобождает пространство, занимающее элементом.

Если элемент скрыт с помощью {visibility: hidden}, то чтобы он снова отображался, вам нужно использовать {visibility: visible}.

Вместо использования CSS {visibility: hidden} & {visibility: visible}, Bootstrap предоставляет вам 2 класса .invisible & .visible:

// Class
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}