Javascript MDBootstrap Visibility Utilities

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>

Output: From the output, we can see that the <p> tag having the invisible class hides the content from rendering.

Javascript MDBootstrap Visibility Utilities

Reference: https://mdbootstrap.com/docs/standard/utilities/visibility/

Article Tags :

JavaScript

Web Technologies

MDBootstrap