Skip to content
Related Articles

Related Articles

What are the different utility classes in Materialize CSS ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 24 Jan, 2022
View Discussion
Improve Article
Save Article

In this article, we will learn about the utility classes in Materialize CSS, along with understanding available classes and their implementation. 

The utility class is generally used to make designing easier along with organizing the content in the proper structure, which contains aligning the content, setting the color of the text and hiding/showing the content with the required class name, formatting the various content i.e truncating or hover to the text. There are several utility classes in Materialize CSS, which are given below.

  • Color utility classes
  • Alignment utility classes
  • Hiding/Showing content utility classes
  • Formatting utility classes

Color utility classes: Color utility classes are used for changing the color of elements of the browser. Using the color utility classes, we can change the background colors of elements of HTML and even change the color of a font.

Background color: For changing the background color of a particular element of the HTML, we should give the desired color as the class name.

Syntax:

<div class="red-text">       
</div>

The background color of the div in the above example will be red.

Font color: For changing the font color of a particular element of the HTML, we should give the desired color text as the class name.

Syntax:

<div class="red-text">      
</div>

The font color of the div content will be red.

Example:

HTML




<!DOCTYPE html>  
<html>  
   <head>         
      <meta name="viewport"
            content="width = device-width, initial-scale = 1">        
      <link rel="stylesheet" 
            href=
      <script src=
      </script>           
   </head>  
       
   <body class="container">    
      <h3>Color Utilities</h3>  
        <div class="green">  
         <h1>Geeks for Geeks</h1
      </div>  
        <div class="red">  
        <h1>Geeks for Geeks</h1
      </div>  
        <div class="green-text">  
         <h1>Geeks for Geeks</h1
      </div>  
        <div class="red-text">  
        <h1>Geeks for Geeks</h1
      </div>  
   </body>  
</html>


Output:

Alignment: Vertical align, Text Align,  Quick Floats, they are used to align the content of HTML easily.

Vertical Align: Name the class as “valign-wrapper” to vertically center HTML content to the container holding the elements which are to be aligned vertically.

Text Align: There are specific classes in Materialize that help us in aligning the content to the left, right, and center in a very easy manner instead of adding all the CSS properties. Simply name the class accordingly to align the content.

The following class names are used to horizontally align the content.

  • .left-align: It is used to align the content to the left.
  • .right-align: It is used to align the content to the right.
  • .center-align: It is used to align the content to the center.

Quick floats: Instead of using CSS, Materialize provides us with a very simple way to float the contents of the browser. Just name the class as left or right according to the float direction respectively.

The following classes are used to quickly float elements in HTML:

  • .left: To float the content to the left.
  • .right: To float the content to the right.

Example: Look at the following example to understand the concepts properly.

HTML




<!DOCTYPE html>  
<html>  
   <head
       
      <meta name="viewport" 
            content="width = device-width, initial-scale = 1">        
      <link rel="stylesheet" 
            href=
      <script src=
      </script>              
   </head>  
       
   <body class="container">                  
      <h1>Alignment Utilities</h1>  
      <h2 class="card-panel valign-wrapper">  
         <p class="valign">Vertically Aligned Text</p>
      </h2>  
      <h2><p class="left-align">Left Aligned Text</p></h2>  
      <h2><p class="right-align">Right Aligned Text</p></h2>  
      <h2><p class="center-align">Center Aligned Text</p></h2>   
    </body>  
</html>  


Output:

Hiding/Showing Content utility classes: Using hiding/showing content utility classes, we can hide/show content.  Using, these utility classes, we can add different properties to different sized devices. For instance, let us consider a situation where we wish to display a specific text on a desktop and display some other text on a mobile device, then we can simply use .show-on-large class for the text that we wish to display only on desktop. Use .show-on-small class for a text that we wish to display only on a mobile.

Similarly we can use all the following utility classes used to hide/show content on different sized devices and add different properties to different sized devices.

  • .hide: Hidden for all devices
  • .hide-on-small-only: Hidden for mobile only
  • .hide-on-med-only : Hidden for tablet only
  • .hide-on-med-and-down: Hidden for tablet and below
  • .hide-on-med-and-up: Hidden for tablet and above.
  • .hide-on-large-only: Hidden for desktop only.
  • .show-on-small: Show for mobile only.
  • .show-on-medium: Show for tablet only.
  • .show-on-large: Show for desktop only.
  • .show-on-medium-and-up: Show for tablet and above.
  • .show-on-medium-and-down: Show for tablet and below.

Example:

HTML




<html>  
   <head>  
       
      <meta name="viewport"
            content="width = device-width, initial-scale = 1">        
      <link rel="stylesheet" 
            href=
      <script src=
      </script>              
   </head>  
       
   <body class="container"
      <div class="hide">  
         <h3>Geeks for Geeks (Hidden on all devices)</h3>  
      </div>  
             
      <div class="hide-on-small-only">  
         <h3>Geeks for Geeks (Hidden on mobile devices)</h3>  
      </div>  
  
      <div class="hide-on-large-only">  
         <h3>Geeks for Geeks (Hidden on desktop devices)</h3>  
      </div>       
   </body>  
</html>  


Output:

  • tablet view:

  • Desktop view: 

  • Mobile view:

Formatting utility classes:

There are some classes in materialize to format the HTML content easily. The formatting utility classes can be used to truncate the content of the browser and to add a shadow to the card aligning the content when hovered easily instead of using CSS.

The following classes are used to format the content.

  • .truncate: This class is used to truncate the content in an ellipsis.
  • card-panel hoverable: This class is used to add the shadow when hovered to the card.

Example: In the following example, when we used the truncate class, we just received a part of the content as the output. When we use hoverable class and hover on the card, we get a box-shadow as shown in the output.

HTML




<!DOCTYPE html>  
<html>  
   <head>       
      <meta name="viewport" content=
           "width = device-width, initial-scale = 1">        
      <link rel="stylesheet" href=
      <script src=
      </script>             
   </head>  
       
   <body class="container">    
            
      <h1>Formatting Utilities </h1>  
      <div class="card-panel">  
         <h3 class="truncate">
              We provide a variety of services for 
              you to learn, thrive and also have fun!
              Free Tutorials, Millions of Articles, 
              Live, Online and Classroom Courses ,
              Frequent Coding Competitions, Webinars 
              by Industry Experts, Internship 
              opportunities and Job Opportunities.
          </h3>  
      </div>            
      <div class="card-panel hoverable">  
         <h3>
             We provide a variety of services for 
             you to learn, thrive and also have fun!
             Free Tutorials, Millions of Articles, 
             Live, Online and Classroom Courses ,
             Frequent Coding Competitions, 
             Webinars by Industry Experts,
             Internship opportunities and 
             Job Opportunities.
        </h3>  
      </div>  
   </body>  
</html>


Output:

Browser Defaults: While using classes is Materialize, we override many default styles of the browser. So the .browser-default class is used to revert these elements to the original style.

Name of element Reverted Style
UL Bullet points
SELECT Browser default select element
INPUT Browser default input

Example: Let us understand browser default clearly by considering the following example for select elements. We used select in the form which allows the user to select among the specific options given. When we use materialize to do so, we get the following output which is very different from default browser properties i.e a browser that is made solely using HTML. We wish to revert the properties of the browser implemented using materialize and retrieve the original properties, we use this default browser class.

HTML




<!DOCTYPE html>  
<html>
   <head>     
      <meta name="viewport" content=
           "width=device-width, initial-scale=1">
      <link rel="stylesheet" href=
      <link rel="stylesheet" href=
      <script type="text/javascript" src=
      </script>
      <script src=
      </script>
      <script>
         $(document).ready(function() {
            $('select').material_select();
          });
      </script>
   </head>
   <body class="container">
       <h1>Browser default example</h1>
       <br>
       <div class="input-field col s12">
            <select>
              <option value="" disabled selected>
                  Choose here </option>
              <option value="1">GFG</option>
              <option value="2">Gfg</option>
              <option value="3">gfg</option>
              <option value="4">gFg</option>
            </select>
            <label>Choose one of the following :</label>
       </div>            
    </body>
</html>


Output:

If we think of retrieving the default browser properties and revert to the original browser properties, all we need to do is add the browser-default class as shown below.

HTML




<!DOCTYPE html>  
<html>
   <head>      
      <meta name="viewport" content=
          "width=device-width, initial-scale=1">
      <link rel="stylesheet" href=
      <link rel="stylesheet" href=
      <script type="text/javascript" src=
     </script>
      <script src=
     </script>
      <script>
         $(document).ready(function() {
           $('select').material_select();
         });
      </script>
   </head>
   <body class="container">
       <h1>Browser default example</h1>
       <br>
       <div class="input-field col s12">
          <select class="browser-default">
              <option value="" disabled selected>
                  Choose one of the following: 
               </option>
              <option value="1">GFG</option>
              <option value="2">Gfg</option>
              <option value="3">gfg</option>
              <option value="4">gFg</option>
         </select>
       </div>            
    </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!