Materialize CSS
  Prev Page
Next Page  
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 :
  Prev Page
Next Page