Helpers

Vertical and Horizontal Align

Wrap element you want vertical align to center in a container with the class valign-wrapper and set the height of container. Add class valign to aligned element.

For horizontally aligning content you can use classes center-align, left-align or right-align and set the width of content element to 100%.

	<div class="valign-wrapper">
		<h5 class="valign center-align">Vertical and horizontal to center</h5>
	</div>
	<div class="valign-wrapper">
		<h5 class="valign left-align">Vertical and horizontal to left</h5>
	</div>
	<div class="valign-wrapper">
		<h5 class="valign right-align">Vertical and horizontal to right</h5>
	</div>
		

Quick Floats

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.

	<div class="row">
		<div class="col s12 m6">
			<h5><i class="mdi-navigation-arrow-back left"></i>Float left</h5>
		</div>
		<div class="col s12 m6">
		    <h5><i class="mdi-navigation-arrow-forward right"></i>Float right</h5>
		</div>
	</div>
        

Hiding/Showing Content

Classes to hide content on specific screen sizes:

	<!-- Hidden for all Devices -->
	<div class="hide"> ... </div>
	
	<!-- Hidden for Mobile Only -->
	<div class="hide-on-small-only"> ... </div>
	
	<!-- Hidden for Tablet Only -->
	<div class="hide-on-med-only"> ... </div>
	
	<!-- Hidden for Tablet and Below -->
	<div class="hide-on-med-and-down"> ... </div>
	
	<!-- Hidden for Tablet and Above -->
	<div class="hide-on-med-and-up"> ... </div>
	
	<!-- Hidden for Desktop Only -->
	<div class="hide-on-large-only"> ... </div>
    
    <!-- Show for Mobile Only -->
	<div class="show-on-small"> ... </div>
    
    <!-- Show for Tablet Only -->
	<div class="show-on-medium"> ... </div>
    
    <!-- Show for Desktop Only -->
	<div class="show-on-large"> ... </div>
    
    <!-- Show for Tablet and Above -->
	<div class="show-on-medium-and-up"> ... </div>
    
    <!-- Show for Tablet and Below -->
	<div class="show-on-medium-and-down"> ... </div>

        

Truncation

To truncate long lines of text, add the class truncate to the tag which contains the text.

	<div class="card-panel">
		<h5 class="truncate">This is an extremely long title that will be truncated</h5>
	</div>
        

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="card-panel hoverable">
		<h5 class="truncate">This is an extremely long title that will be truncated</h5>
	</div>
        

Browser Defaults

Because we override many of the default browser styles and elements, we provide the browser-default class to revert these elements - ul (bullet points), select, input (browser defaults) - to their original state.

For more detailed informations please visit: http://materializecss.com/helpers.html