Bootstrap Visibility Utilities Tutorial with Examples

In CSS, there are 2 ways for you to hide an element:

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

Now, I will explain the difference between the two ways.

{display: none} hides the element, and releases the space occupied by the element. That means that after the element is hidden, other elements can occupy its space.

{visibility: hidden} will hide the element but it doesn't release the space occupied by the element.

If the element is hidden by the {visibility: hidden} then, to display it again, you will have to use {visibility: visible}.

Instead of using CSS {visibility: hidden} & {visibility: visible}, Bootstrap provides you with the 2 .invisible & .visible classes:

// Class
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}