Cодержание

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

View more Tutorials:

1- Boostrap Visibility

В CSS если 2 способа скрытия элемента для вас:
  1. Использовать CSS Property: {display: none}.
  2. Использовать ​​​​​​​CSS Property: {visibility: hidden}.
Теперь я объясню разницу между 2-мя способами выше.

{display: none}

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

{visibility: hidden}

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

Bootstrap Visibility

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

.invisible {
  visibility: hidden;
}

View more Tutorials: