Visibility

Bootstrap visibility

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Control the visibility, without modifying the display, of elements with visibility utilities. These do not modify the display value at all and are helpful for hiding content from most users, but still keeps it available for screen readers.

Just apply the .visible or .invisible classes as needed.

Edit in sandbox 
        
            

        <div class="visible">...</div>
        <div class="invisible">...</div>

      
        
    
        
            

          // Class
          .visible {
              visibility: visible;
          }
          .invisible {
              visibility: hidden;
          }

          // Usage as a mixin
          .element {
              @include invisible(visible);
          }
          .element {
              @include invisible(hidden);
          }

Basic examples

Here you can see, that you can hide on your website everything you want, for example pictures, text or even other MDBootstrap components.

Visible element

Invisible element

Edit in sandbox 
        
            

        <div class="row mt-5">
          <div class="col-md-2 visible text-center">
            <button type="button" class="btn btn-purple"><i class="fas fa-code pr-2"></i>Example</button>
          </div>
          <div class="col-md-2 invisible example text-center">
            <button type="button" class="btn btn-purple"><i class="fas fa-code pr-2"></i>Example</button>
          </div>
        </div>

      
        
    
        
            

          // Class
          .visible {
              visibility: visible;
          }
          .invisible {
              visibility: hidden;
          }

          // Usage as a mixin
          .element {
              @include invisible(visible);
          }
          .element {
              @include invisible(hidden);
          }

Hiding components:

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Visible element

Invisible element

Edit in sandbox 
        
            

        <div class="row mt-3">
          <div class="col-md-4 visible">
            <!-- Card -->
            <div class="card">
      
              <!-- Card image -->
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
      
              <!-- Card content -->
              <div class="card-body">
      
                <!-- Title -->
                <h4 class="card-title"><a>Card title</a></h4>
                <!-- Text -->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                  content.</p>
                <!-- Button -->
                <a href="#" class="btn btn-primary">Button</a>
      
              </div>
      
            </div>
            <!-- Card -->
          </div>
          <div class="col-md-4 invisible">
            <!-- Card -->
            <div class="card">
      
              <!-- Card image -->
              <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
      
              <!-- Card content -->
              <div class="card-body">
      
                <!-- Title -->
                <h4 class="card-title"><a>Card title</a></h4>
                <!-- Text -->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                  content.</p>
                <!-- Button -->
                <a href="#" class="btn btn-primary">Button</a>
      
              </div>
      
            </div>
            <!-- Card -->
          </div>
        </div>

      
        
    
        
            

          // Class
          .visible {
              visibility: visible;
          }
          .invisible {
              visibility: hidden;
          }

          // Usage as a mixin
          .element {
              @include invisible(visible);
          }
          .element {
              @include invisible(hidden);
          }