Javascript MDBootstrap Opacity 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 Opacity Utilities in Javascript MDBootstap.

MDBootstrap Opacity Utilities is used to set the opacity level or transparency level for an element, where 0 represents completely transparent, 5 represents 50% visible & 1 represents not transparent at all.

Syntax:

<h2 class="opacity-100">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>
<script type=”text/javascript”></script>

Example 1: This is the basic example illustrating the use of Javascript Opacity Utilities in MDBootstrap.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <title>Javascript MDBootstrap Opacity 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="opacity-75" 
            style="margin-top: 50px;"> 
            GeeksforGeeks 
        </h2> 
        <h4 class="opacity-50"> 
            MDBootstrap Javascript Opacity Utilities 
        </h4> 
        <p class="opacity-25">Opacity-25</p> 
  
    </div> 
</body> 
</html>