Materialize Container Materialize provides container class which is used to create the content container. Container class creates a container of width 70% of the window width. It centers the content of the page. Here in this tutorial we are going to explain how to create container and use it in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Container Example

To create container add container class to the div. Let us create first container using this class-

Container

  
Container

In the above example we have created container using class container, we have added a background of yellow color so that we can have clear view how container class works.

If you run the above example it will produce the output something like this –

MaterializeCss Installation(Environment Setup): It is very easy to setup environment for Materialize Css. Here in this tutorial we are going to explain how you can install Materialize Css. –

Materialize Installation Steps

There are two ways to install Materialize –

• Install Locally: To install Materialize Locally Download materialize.min.css and materialize.min.js and include it on page.
• CDN Based Installation: You can also install materialize from CDN based network. You can directly include the files from Content Delivery Networks.

Install Locally:

To install locally download the materialize.min.css and materialize.min.js from http://materializecss.com/getting-started.html And keep them in js and css folder and simply include as below –

jQuery is required so do not forget to include it.

CDN Based Installation

You can also install materialized css and js from CDN simply as below –

Now you are ready to go and You can create your first page in Materialize.
So let us create an example.

Example

Let us create an example using the CDN based installation of Materialize Css and Js.

  
    
      
      
      
      
  
   
    
  
  

      
      
    
    
    
My First App
    
  

Materialize Tutorial : Materialize is modern responsive front-end framework which is based on the Material Design. Materialize framework is created with Html, Css and JavaScript. Materialize framework enables us to create responsive, beautiful websites, apps. Materialize is very easy to learn and implement.

Here in this tutorial we are going to explain each topic with various examples & demos which will help us to learn the things in an easy way. You can use our online editor to edit and run the code online.

Materialize Tutorial With Example & Demo

Materialize provides rich layouts, responsive animations, transitions,depth effects such as lighting, shadows, autocomplete, swipe and switches etc which makes it most powerful UI Component. We are sure once you will use it, You will love it.

What You Should Know?

Before Starting you might be aware of HTML, JavaScript, jQuery And Css.

Materialize Features

Let us have look over some core features of Materialize Framework-

• Speed Of Development– Materialize provides so many inbuilt utilities which boosts the speed of development.
• Focused on User Experience– As we know Materialize is based on Material design, which enables us to create application which can deliver the best user experience.
• Easy To Learn– Materialize is very easy to learn and understand, you can create cool web pages easily in materialize framework.

Learn With Example And Demo

You can Learn Materialize With our online editor to edit and run the code online.

  
    
      
      
      
      
  

  
  

      
      
    

    
    
Materialize Tutorial With Example & Demo!
    
          

We hope this tutorial will be helpful for you in understanding the Materialize Basic concept.

If you run the above example it will produce output something like this in the below image –