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 class="valign">This should be vertically aligned</h5>
</div>
        

Text Align

These classes are for horizontally aligning content. We have .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>
        

Hiding Content

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

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

Usage

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