Visibility

Usage

Our visibility classes help you to remove an elements visibility from the DOM at different breakpoints.
Note that it's different from using display: none; as that will completely remove it from the page. With visibility: hidden; the element is hidden but the space is allocated for it on the page, and the tag is rendered.

Notation:

You can target the visibility classes by using visible-{breakpoint}. The breakpoint being optional and one of our five breakpoints
You can also make an element invisible by using invisible-{breakpoint}.
These classes affect the breakpoint and upwards, for example invisible-tab will make the element's visibility hidden on tablet, desktop & HD screens but visible at mobile or extra small.

Properties:

Class	Properties
.visible	visibility: visible;
.invisible	visibility: hidden;

Examples

Vanishing act:

Here, the first element is floated to the left, the second to the right on desktop screens, the clearfix class is used on the parent. See the effect it has with it turned off by using the button.

<div class="d-flex">
    <div class="w-30"></div>
    <div class="invisible w-30"></div>
    <div class="w-30"></div>
</div>

Variations

<!-- Default -->
<div class="visible"></div>
<div class="invisible"></div>
<!-- Mobile -->
<div class="visible-mob"></div>
<div class="invisible-mob"></div>
<!-- Tablet -->
<div class="visible-tab"></div>
<div class="invisible-tav"></div>
<!-- Desktop -->
<div class="visible-desk"></div>
<div class="invisible-desk"></div>
<!-- HD -->
<div class="visible-hd"></div>
<div class="invisible-hd"></div>