Skip to content
Related Articles

Related Articles

Improve Article

How to use Materialize CSS ?

  • Last Updated : 14 Sep, 2021
Geek Week

Materialize CSS is a design language that is used to develop the system of design that allows for a unified user experience across all products on any platform.

Materialize CSS comes in two different forms, any of them can be used by simply downloading that file, you can use the Materialize CSS into your system.

Note: We can use CDN links or install Materialize through NPM and Bower.

Using CDN Link:

<!– Compiled and minified CSS –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>



<!– Compiled and minified JavaScript –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>  

NPM Install Command:

npm install materialize-css@next

Bower Install Command:

bower install materialize

Materialize Setup: After downloading the file, simply unzip the file in your project folder. Your Materialize folder will look like the below image.
 

SASS

Materialize

HTML Setup: Now simply create an HTML file where you need to import the Materialize, we use the Materialize standard version.

Example 1: In this example, we will simply use text color as well as the background color. To make the correct alignment we will use col and flow class. Use the above libraries in your code or use them in the local folder as given below.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet"
        href="css/materialize.min.css" 
        media="screen,projection" />
  
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h1 class="green-text text-darken-1">
        GeeksforGeeks
    </h1>
      
    <div class="row">
        <div class="col s12">
            <span class="flow-text green darken-1">
                A Computer Science Portal for Geeks
            </span>
        </div>
    </div>
  
    <!--JavaScript at end of body for 
        optimized loading-->
    <script type="text/javascript" 
        src="js/materialize.min.js">
    </script>
</body>
  
</html>

Output:

Example 2: In this example, we will simply use text color as well as classes col and flow-text for nice visual design.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" 
        href="css/materialize.min.css" 
        media="screen,projection" />
  
    <!--Let browser know website is 
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h1 class="green-text text-darken-2">
        GeeksforGeeks
    </h1>
      
    <div class="row">
        <div class="col s12">
            <span class="flow-text">
                This is simple example off how to 
                use Materialize in your website
            </span>
        </div>
  
        <div class="col s6 offset-s6">
            <span class="flow-text">
                Materialize CSS
            </span>
        </div>
    </div>
    <!--JavaScript at end of body for 
        optimized loading-->
    <script type="text/javascript" 
        src="js/materialize.min.js">
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :