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