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%.

Vertical and horizontal to center
Vertical and horizontal to left
Vertical and horizontal to right

	<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.

arrow_backFloat left
arrow_forwardFloat right

	<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.

This is an extremely long title that will be truncated

	<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.

This is an extremely long title that will be truncated

	<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