Javascript MDBootstrap Visibility Utilities

Last Updated : 07 Mar, 2022

MDBootstrap is a Material Design and bootstrap-based Javascript UI library that is used to make attractive webpages with its seamless and easy-to-use component. It is free for both personal & commercial use. In this article, we will know how to use Visibility Utilities in Javascript MDBootstap.

MDBootstrap Visibility Utilities is used to control the visibility without affecting or changing the display, of elements having the visibility utilities.

Syntax:

<h2 class="visibility">GeeksforGeeks</h2>

Approach:

Download Javascript MDBootstrap from the official site.
Extract the files to the current working directory.
In the Index.html file, specify the downloaded file path in the <head> tag.

<link rel=”icon” href=”img/mdb-favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.15.2/css/all.css” />
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap”/>
<link rel=”stylesheet” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>

Example 1: This example illustrates the MDBootstrap Javascript Visibility Utilities where the visible class can be used to render the content.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <title>Javascript MDBootstrap Visibility Utilities</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1,  
                   shrink-to-fit=no" /> 
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" /> 
    <link rel="stylesheet" 
          href= 
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> 
    <link rel="stylesheet" 
          href= 
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> 
    <link rel="stylesheet" 
          href="css/mdb.min.css" /> 
    <script type="text/javascript" 
            src="js/mdb.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="margin-left: 50px;"> 
        <h2 class='visible'
            style="margin-top: 50px;"> 
            GeeksforGeeks 
        </h2> 
        <h4> 
            MDBootstrap Javascript Visibility Utilities 
        </h4> 
        <br> 
        <p class='invisible'> 
            MDBootstrap is a Material Design and  
            bootstrap-based Javascript UI library  
            that is used to make good looking  
            webpages with its seamless and  
            easy-to-use component. 
        </p> 
  
    </div> 
</body> 
</html>