We have easy to use classes to help you align your content.

#### Vertical Align

- View
- Html

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

- View
- Html

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

###### This should be left aligned

###### This should be right aligned

###### This should be center aligned

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

#### Quick Floats

- View
- Html

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

###### Left Floating Text

###### Right Floating Text

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

#### Hiding/Showing Content

- View
- Html

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

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

#### Formatting

- View
- Html

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 a long title that will be truncated

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

#### Hover

- View
- Html

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>

#### 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