menu

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.

Materialize Helpers : Vertical Align Middle

Try it »

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

Materialize Helpers : Vertical Align Middle Class

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 –

Materialize Helpers | Text Align | Left | Right | Center | Example:

Try it »

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

Text Align | Left | Right | Center | Example:

Float

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

Materialize Helpers | Float | Left | Right Example:

Try it »

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

Materialize Helpers | Float | Left | Right Example:

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

Materialize Helpers | Hide Contents Example:

Try it »

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.

Materialize Helpers | Truncate Text Contents Example:

Try it »

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

Truncate text example

Hover

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

Materialize Helpers | Hoverable Effect Example:

Try it »

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.

📖 Read More


Advertisements