Materialize Helpers

Materialize Helpers : Materialize Provides inbuilt classes which fulfills the common and frequent tasks such as alignment, float, formatting, hover etc. Here in this tutorial we are going to explain how you can use these predefined classes. You can also use our online editor to edit and run the code online.

Materialize Helpers Example

Following helper classes are available-

• Alignment Classes
• Float Classses
• Hiding Content Classes
• Formatting Class
• Hover Class
• Browser Defaults Class

Alignment Classes

There are following alignment classes in Materialize-

• Vertical Align
• Text Align(Left Align, Right Align, Center Align)

Vertical Align

If you want to align the things vertically just add the class valign-wrapper to the container and valign class to the element you want to align vertically.

<div class="valign-wrapper amp-wp-inline-9ad7d29cb565f538b4d2dc3beee27100">
  <h2 class="valign">Hello World!</h2>
</div>

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

Text Align

There are following three classes which can be used to align text horizontally-

• left-align : This class is used to left align the text.
• right-align : This class is used to right align the text.
• center-align : This class is used to center align the text.

Now let us create an example to understand this –

<div class="amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">
  <h2 class="left-align">Left Align Text</h2>
  <h2 class="right-align">Right Align Text</h2>
  <h2 class="center-align">Center Align Text</h2>
</div>

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

Float

There are basically two float classes available – left & right. You can use these classes to easily float the elements.

<div class="left amp-wp-inline-272e4802d02389b174dca822fe9f5b24">
  Float Left
</div>
<div class="right amp-wp-inline-272e4802d02389b174dca822fe9f5b24">
  Float right
</div>

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

Hiding Contents Classes

Sometimes we need to hide some content for all devices or some specific devices. Materialize provides inbuilt classes to hide content on several devices.

• .hide: Hide for all Devices
• .hide-on-small-only: Hide for Mobile Only
• .hide-on-med-only: Hide for Tablet Only
• .hide-on-med-and-down:Hide for Tablet and Below
• .hide-on-med-and-up:Hide for Tablet and Above
• .hide-on-large-only:Hide for Desktop Only

<div class="hide-on-large-only">
 <p>This will be hidden on desktop.</p>
</div>                                                                                                                                                                                                                                                                                                                

If you run the above example it will hide the div content on desktop.

Formatting

[su_divider top=”no” margin=”5″]

Materialize provides Formatting classes to format content.

• Truncation
• Hover

Truncation

This class is used to truncate the long text in an ellipsis.

<h2 class="truncate">This is large text heading Example</h2>                                                                                                                                                                                                                                                                                                               

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

Hover

Materialize provides the hoverable class that adds the box shadow animation.

<div class="card-panel hoverable"> Hoverable Effect Demo</div>                                                                                                                                                                                                                                                                                                            

Browser Defaults

Some default styles are overridden in Materialize and sometimes we need default styles instead of overridden, so it provides browser-default class to revert the elements style to their original state.