Materialize CSS Helpers Classes

Materialize CSS Helpers

Materialize CSS provides different helper utility classes. These utility classes are primarily used for text alignment, coloring the element, hiding/showing the element, formatting the text, etc.

Here, we will discuss the following types of helper utility classes.

  • Text Align- Horizontal & Vertical
  • Floating Concept
  • Hide & Show
  • Truncate Concept
  • Hover

Text Align

Text can be aligned in the left, center, or right direction along the main axis i.e x-axis.

Text Align: Left Direction

To align text in the horizontal left direction, assign the .left-align class to the HTML element base class.

General Syntax

<element class="left-align"></element>    
Try It Now

Source Code

Download
<div class="container">
 <h5 class="left-align">This should be left aligned</h5>
</div>    
Try it yourself

Source Code : Output

This should be left aligned

Text Alignment: Right

To align text in the right direction along the x-axis, add the right-align class to the HTML element base class.

General Syntax

<element class="right-align"></element>    
Try It Now

Source Code

Download
<div class="container">
  <h5 class="right-align">This should be right aligned</h5>
 </div>    
Try it yourself

Source Code : Output

This should be right aligned

Text Alignment: Center

To align text in the center of the horizontal axis, use the center-align class to the HTML element class.

General Syntax

<element class="center-align"></element>    
Try It Now

Source Code

Download
<div class="container">
     <h5 class="center-align">This should be center aligned</h5>
  </div>    
Try it yourself

Source Code : Output

This should be center aligned

Quick Floats

Materialize CSS provides float classes that are used to align things either in the left direction or the right direction.

Float: Left

To float the things in the left direction use the left class.

General Syntax

<element class="left"></element>    
Try It Now

Source Code

Download
<div class="container">
  <h5 class="left">Float Left</h5>
</div>    
Try it yourself

Source Code : Output

Float Left

Float:Right

To float the things in the right direction, use the right class to the HTML element base class.

General Syntax

<element class="right"></element>    
Try It Now

Source Code

Download
<div class="container">
   <h4 class="right">Right Aligned Text Using Float</h4>
</div>    
Try it yourself

Source Code : Output

Right Aligned Text Using Float

Vertical Align:Center

To align the element vertically center, assign the valign-wrapper class to the container base class that holds the aligning element.

General Syntax

<element class="valign-wrapper"></element>    
Try It Now

Source Code

Download
<div class="valign-wrapper" style="min-height:100px;">
  <h5>This should be vertically aligned</h5>
</div>    
Try it yourself

Source Code : Output

This should be vertically aligned

Hiding/Showing Content

Materialize CSS provides different predefined classes for displaying & hiding the text content with respect to the device viewport width. Let us understand the predefined hiding and showing classes.

  • .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

Source Code

Download
<div class="container">
<div class="row hide-on-small-only">
    <div class="card-panel amber">
      <h5 class="center-align">Hide Only Small Screens</h5>
    </div>
</div>
</div>    
Try it yourself

Source Code : Output

Hide Only Small Screens

Truncation

To truncate long lines of text in an ellipsis, add the .truncate class to the HTML element base class.

General Syntax

<element class="truncate"></element>    
Try It Now

Source Code

Download
<div class="container">
 <div class="row">
	<div class="col s12 ">
        <div class="card-panel blue white-text">
        	<!-- Start truncate class -->
            <h4 class="truncate">Shape Your Path provides tutorial on HTML5,CSS3,Javascript,Jquery,JSON,Materilaize CSS,Bulma,Pure,UIkit CSS framework,etc</h4>
            <!-- End truncate class -->
        </div>
    </div>
 </div>
</div>    
Try it yourself

Source Code : Output

Shape Your Path provides tutorial on HTML5,CSS3,Javascript,Jquery,JSON,Materilaize CSS,Bulma,Pure,UIkit CSS framework,etc

Hover

The hover utility class is used to create an animation for box shadow. It can be used with most of the elements.

General Syntax

<element class="hoverable"></element>    
Try It Now

Source Code

Download
<div class="container">
  <div class="card-panel hoverable"> Hoverable Card Panel</div>
</div>    
Try it yourself

Source Code : Output

Hoverable Card Panel

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS