Helpers

Materialize is a modern responsive CSS framework based on Material Design by Google.

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-wrapper to the container holding the items you want to vertically align.

This should be vertically aligned


<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

        
Text Align

These classes are for horizontally aligning content: .left-align, .right-align and .center-align.

This should be left aligned
This should be right aligned
This should be center aligned


<div>
  <h5 class="left-align">This should be left aligned</h5>
</div>
<div>
  <h5 class="right-align">This should be right aligned</h5>
</div>
<div>
  <h5 class="center-align">This should be center aligned</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="left">...</div>
<div class="right">...</div>

        

Hiding/Showing Content

We provide easy to use classes to hide/show content on specific screen sizes.

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
Usage

<div class="hide-on-small-only"></div>
        

Spacing

These classes help space elements with margin and padding helpers for all directions. This works by combining a margin/padding prefix, a direction infix and value suffix

Prefix margin and padding modifiers
Prefix Modifies
m* Modifies the margin according to the infix and suffix values. If no infix is provided, it will be applied to all directions.
p* Modifies the padding according to the infix and suffix values. If no infix is provided, it will be applied to all directions.
Inffix direction modifiers
Infix Direction
*t Applies modifier to the top side of the element
*r Applies modifier to the right side of the element
*b Applies modifier to the bottom side of the element
*l Applies modifier to the left side of the element
*x Applies modifier to the left and right sides of the element
*y Applies modifier to the top and bottom sides of the element
Suffix values

Any margin or padding modifier must be appended with one of 6 value suffixes

Suffix Value
*-0 0
*-1 0.25rem
*-2 0.5rem
*-3 0.75rem
*-4 1rem
*-5 1.5rem
*-6 3rem
Tables of all spacing helpers

All margin helpers

Property Prefix Classes
margin m m-0 m-1 m-2 m-3 m-4 m-5 m-6 m-auto
margin-top mt mt-0 mt-1 mt-2 mt-3 mt-4 mt-5 mt-6 mt-auto
margin-right mr mr-0 mr-1 mr-2 mr-3 mr-4 mr-5 mr-6 mr-auto
margin-bottom mb mb-0 mb-1 mb-2 mb-3 mb-4 mb-5 mb-6 mb-auto
margin-left ml ml-0 ml-1 ml-2 ml-3 ml-4 ml-5 ml-6 ml-auto
margin-top and margin-bottom my my-0 my-1 my-2 my-3 my-4 my-5 my-6 my-auto
margin-left and margin-right mx mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6 mx-auto
Values 0 0.25rem 0.5rem 0.75rem 1rem 1.5rem 3rem auto

All padding helpers

Property Prefix Classes
padding p p-0 p-1 p-2 p-3 p-4 p-5 p-6 p-auto
padding-top pt pt-0 pt-1 pt-2 pt-3 pt-4 pt-5 pt-6 pt-auto
padding-right pr pr-0 pr-1 pr-2 pr-3 pr-4 pr-5 pr-6 pr-auto
padding-bottom pb pb-0 pb-1 pb-2 pb-3 pb-4 pb-5 pb-6 pb-auto
padding-left pl pl-0 pl-1 pl-2 pl-3 pl-4 pl-5 pl-6 pl-auto
padding-top and padding-bottom py py-0 py-1 py-2 py-3 py-4 py-5 py-6 py-auto
padding-left and padding-right px px-0 px-1 px-2 px-3 px-4 px-5 px-6 px-auto
Values 0 0.25rem 0.5rem 0.75rem 1rem 1.5rem 3rem auto
Usage


<div class="p-2">
  <h5 class="mt-1">The div has a padding 0.5rem and the h5 has a margin-top of 0.25rem</h5>
</div>

        

Formatting

These classes help format various content on your site.

Truncation

To truncate long lines of text in an ellipsis, add the class truncate to 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



<h4 class="truncate">This is an extremely long title that will be truncated</h4>

        
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.

Card Title

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



<div class="card-panel hoverable"> Hoverable Card Panel</div>

        

Browser Defaults

Because we override many of the default browser styles and elements, we provide the .browser-default class to revert these elements to their original state.

Name of Element Reverted Style
UL Bullet points
SELECT Browser default select element
INPUT Browser default input