Skip to content
Related Articles

Related Articles

How to Install and use Materialize CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 16 May, 2022
View Discussion
Improve Article
Save Article

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!