Visibility

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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);
          }