Materialize Hello World 

Materialize Hello World 

Click on RUN button to see the output

Materialize online editor

Write, Run & Share Materialize code online using OneCompiler's Materialize online editor for free. It's one of the robust, feature-rich online editor for Materialize. Getting started with the OneCompiler's Materialize online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Materialize' and start writing code to learn and test online instantly.

About Materialize

Materialize CSS is a UI component library which is created with CSS, JavaScript and HTML by Google.

Key principles:

  • Material is the metaphor
  • Bold, graphic, intentional
  • Motion provides meaning

Syntax help



Background color

<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>


.ilike-blue-container {
    @extend .blue, .lighten-4;

Text color

<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>


 .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
Color Names
classes to vary the color applied


  • Row and column style classes
Small Screen DevicesDescription
s1Defines 1 of 12 columns with width as 08.33%
s2Defines 2 of 12 columns with width as 16.66%.
s3Defines 3 of 12 columns with width as 25.00%.
s4Defines 4 of 12 columns with width as 33.33%.
s5-s11Defines 5-11 columns respectively
s12Defines 12 of 12 columns with width as 100%. Default class for small screen phones
Medium Screen Devices
m1Defines 1 of 12 columns with width as 08.33%
m2Defines 2 of 12 columns with width as 16.66%.
m3Defines 3 of 12 columns with width as 25.00%.
m4Defines 4 of 12 columns with width as 33.33%.
m5-m11Defines 5-11 columns respectively
m12Defines 12 of 12 columns with width as 100%. Default class for medium screen phones
Large Screen Devices
l1Defines 1 of 12 columns with width as 08.33%
l2Defines 2 of 12 columns with width as 16.66%.
l3Defines 3 of 12 columns with width as 25.00%.
l4Defines 4 of 12 columns with width as 33.33%.
l5-l11Defines 5-11 columns respectively
l12Defines 12 of 12 columns with width as 100%. Default class for large screen devices like laptops


<div class="col s2 m3 l4"></div>

The above specifies to use 2 columns on a small screen, 3 on a medium screen, and 4 on a large screen

 <div class="row">
      <div class="col s12">This div is 12-columns wide on all screen sizes</div>
      <div class="col s6">6-columns (one-half)</div>
      <div class="col s6">6-columns (one-half)</div>
      <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>

      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span><div>




<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>


<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>


<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>

Small and large Buttons

<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-large">Button</a>


<a class="btn disabled">Button</a>


    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>


  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        <div class="card-action">
          <a href="#">This is a link</a>


  tiny: 1rem
  small: 2rem
  medium: 4rem
  large: 6rem
  <i class="large material-icons">insert_chart</i>


    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>


  <ul class="pagination">
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    <li class="active"><a href="#!">1</a></li>
    <li class="waves-effect"><a href="#!">2</a></li>
    <li class="waves-effect"><a href="#!">3</a></li>
    <li class="waves-effect"><a href="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>


  <div class="progress">
      <div class="determinate" style="width: 70%"></div>
   <div class="progress">
      <div class="indeterminate"></div>