o7planning

Bootstrap Visibility Utilities Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

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:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.