Bootstrap Visibility Utilities Tutorial

View more Tutorials:

1- Boostrap Visibility

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}

{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}

{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}.

Bootstrap Visibility

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

.invisible {
  visibility: hidden;

View more Tutorials: