Materialize CSS Helpers

There are several helpers in materialize CSS that are used for designing needs such as:

• Alignment
• Hiding/Showing content
• Formatting

1. Alignment: Content can be aligned horizontally or vertically by using the following classes:

• Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to align.

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

• Horizontal Align: These classes are used for horizontally aligning the content: left-align, right-align, center-align.

   <div>
   <h5 class="left-align">This is left aligned</h5>
   </div>
   <div>
   <h5 class="right-align">This is right aligned</h5>
   </div>
   <div>
   <h5 class="center-align">This is center aligned</h5>
   </div>

• Quick Float: There are other classes that is used to align the content are left and right.

  <div class="left">...</div>
  <div class="right">...</div>

2. Hiding/Showing content: To hide/show content on specific screen, materialize provides easy to use classes.

<div class="hide-on-small-only">
This will be hidden from mobile screen
</div>

3. Formatting: These classes helps to format various content. These classes are - 

• Truncation: To truncate long lines of text in an ellipsis, truncate class is added to the tag that contains text.

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

• Hover: The hoverable is the hover class that is used to add animation for the box shadow.

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

Here is an example in which all of the above classes are used: