v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?


Control an element's visibility without changing the display property.

Page Contents

Overview #

Set the visibility of an element, meaning its display is not modified and will not affect layout. .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.

Examples #

Use .invisible and .visible as needed.

<div class="invisible">...</div>
<div class="visible">...</div>
// Class
.invisible {
visibility: hidden !important;
.visible {
visibility: visible !important;

// Usage as a mixins
.element {
@include invisible;
.element {
@include visible;

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-visibility boolean true Enable the generation of the visibility utility classes.

Mixins #

invisible() #

Set an element to be invisible.

@include invisible();

visible() #

Set an element to be visible.

@include visible();