Materialize CSS Helpers

Materialize CSS helpers provide 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 type of Materialize helpers utility classes.

Text Alignment
- Vertical Align
- Horizontal Align
- Quick Float
Hiding/Showing content
Formatting
- Truncation
- Hover

Text Alignment

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

Text Align: Left

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

Example

This should be left aligned

General Syntax

    <element class="left-align"></element>

Try It Now

Source Code

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

Example

This should be right aligned

General Syntax

    <element class="right-align"></element>

Try It Now

Source Code

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

Example

This should be center aligned

General Syntax

    <element class="center-align"></element>

Try It Now

Source Code

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

Example

Left floated text

General Syntax

    <element class="left"></element>

Try It Now

Source Code

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

Example

Right Floated Text

General Syntax

    <element class="right"></element>

Try It Now

Source Code

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

Example

vertically Aligned Text

General Syntax

    <element class="valign-wrapper"></element>

Try It Now

Source Code

     
      <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

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

Example

Shape Your Path is a world one of the most popular learning platforms for HTML5, CSS3, Javascript, Jquery, JSON, materialize CSS, Bulma, Pure, UIkit CSS framework,etc.

General Syntax

    <element class="truncate"></element>

Try It Now

Source Code

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

Example

Hoverable Card Panel

General Syntax

    <element class="hoverable"></element>

Try It Now

Source Code

     
      <div class="container">
  <div class="card-panel hoverable"> Hoverable Card Panel</div>
</div>

Try it yourself

Source Code : Output

Hoverable Card Panel

Conclusion

Materialize CSS helpers are used to align the text in the horizontal or vertical direction, showing or hiding content based on the device breakpoints, formatting the text in the form of truncation or hover.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS