How to Install and use Materialize CSS ?

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:

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:

Output:

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.