Materialize CSS
Materialize Helpers
There are several utility classes in Materialize CSS which are used for designing needs.

Alignment classes : For example, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right.

Hiding Content classes  :  For example, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up and .hide-on-large-only.

Showing Content classes  :  For example, .show-on-small, .show-on-medium, .show-on-large, .show-on-medium-and-up, .show-on-medium-and-down.

Formatting classes : For example, truncate, hoverable.
Vertical Align

You can adding the class valign-wrapper to the container holding the items you want to vertically align.

<div class="row">
    <div class="card-panel brown valign-wrapper">
      <h5 class="white-text">This is vertical alignement</h5>
    </div>
</div>
Output :
Text Align

Text alignment classes are : .left-align, .center-align, .right-align.

<div class="row">
    <div class="card-panel cyan">
      <h5 class="left-align">left aligned</h5>
    </div>
    <div class="card-panel cyan">
      <h5 class="center-align">Center aligned</h5>
    </div>
    <div class="card-panel cyan">
      <h5 class="right-align">Right aligned</h5>
    </div>
</div>
Output :
Hiding/Showing Content

hide/show content utility classes on specific screen sizes in following table.

Class Screen Range
.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
<div class="row hide-on-small-only">
    <div class="card-panel amber">
      <h5 class="center-align">Hide Only Small Screens</h5>
    </div>
</div>
Output :
Truncation

To truncate long lines of text in an ellipsis, add the .truncate class to the tag which contains the text. See an example below of a header being truncated inside a card.

<div class="row">
	<div class="col s12 m6 l4 offset-m3 offset-l4">
        <div class="card-panel blue white-text">
        	<!-- Start truncate class -->
            <h4 class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
            <!-- End truncate class -->
        </div>
    </div>
</div>
Output :
Hover

The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.

<div class="container">
    <div class="card-panel hoverable orange center-align">
    	<img src="../images/Free-Time-Learning.png" class="responsive-img" alt="F T L">
		<h5 class="white-text">www.freetimelearning.com</h5>
    </div>
</div>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.