You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.

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

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

              <h6 class="left-align">This should be left aligned</h6>
              <h6 class="right-align">This should be right aligned</h6>
              <h6 class="center-align">This should be center aligned</h6>

  

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.

  <h6 class="left">Left Floating Text</h6>
  <h6 class="right">Right Floating Text</h6>
  

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

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

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.

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

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.

This is a link

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