Helpers
Alignment We have easy to use classes to help you align your content.
Vertical Align
You can easily vertically center things by adding the class valign-wrapperto the container holding the items you want to vertically align.
This should be vertically aligned
Text Align
These classes are for horizontally aligning content. We have .left-align, .right-alignand .center-align
This should be left aligned
This should be right aligned
This should be center aligned
Quick Floats Quickly float things by adding the class
leftor rightto the element. !importantis used to avoid specificity issues.Hiding Content Materialize provides easy to use classes to hide content on specific screen sizes.
| 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 |
Formatting These classes help format various content on your site.
Truncation
To truncate long lines of text in an ellipsis, add the class truncateto the tag which contains the text. See an example below of a header being truncated inside a card.
This is an extremely long title that will be truncated
Hover
Card Title
The hoverableis 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.
Card TitleI am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.