Open In App

How to Install and use Materialize CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Materialize CSS is a design language that was made with CSS, JavaScript, and HTML. It is made and planned by Google. Materialize is created and designed by Google. Google’s goal is to develop a system design that allows a better user experience across all products on any platform. It also makes the web page mobile-responsive.

Using Materialize CSS

1. Local Installation: You can download files from Materialize on your system and include them in your HTML file.

<link rel="stylesheet" href="css/materialize.min.css">
<script src="js/materialize.min.js"></script>

Example:

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href="css/materialize.min.css">
  
        <!-- Compiled and minified JavaScript -->
        <script src="js/materialize.min.js">
        </script>
    </head>
    <body>
        <div class="container">
            <div id="gfg" class="card-panel green">
                <h3 class="white-text text-accent-3">
                  GeeksforGeeks
                </h3>
            </div>
            <h4 onclick=
                "M.toast({html: 'CS Portal for geeks'})" 
                class="btn blue">
              Click Me
            </h4>
        </div>
    </body>
</html>


Output:

2. Using CDN Link: You can use the CDN link to run the code without installing it. Include the following CDN links inside the head tag.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet"
          href=
  
    <!-- Compiled and minified JavaScript -->
    <script src=
      </script>
</head>
<body>
     <div id="gfg" 
          class="card-panel green">
        <h1 class="white-text text-accent-3">
          Hello World by GeeksforGeeks
        </h1>
     </div>
</body>  
</html>


Output:

CDN Based

Install Materialize using npm: Before installing it in your system, First, install node.js and npm and then run the following command in the terminal:

npm install materialize-css@next

After using this command folder structure look like the below image. You can then access the Materialize components in your application.

Install Materialize using Bower:

Before installing Materialize bower package, Install Bower first either it will give you an error.

npm install -g bower

Use this command to install Materialize bower package in your system

bower install materialize

After using this command folder structure look like the below image. You can then access the Materialize components in your application.

Note: Bower has been deprecated.



Last Updated : 16 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads