---
title: Display Utilities
description: Various utilities that can be used to accomplish a variety of common needs quickly.
sass: ./scss/_display.scss
foundation: http://foundation.zurb.com/sites/docs/visibility.html
---

<div class="callout warning">
    <i class="icon-exclamation icon-large callout-icon alert-color"></i>
    <span>
        All utility classes have `!important` applied to their properties
    </span>
</div>

## Typography Classes

### Horizontal Alignment

```html_example
<div class="small-4">
  <p class="txtl">Left Aligned</p>
  <p class="txtc">Center Aligned</p>
  <p class="txtr">Right Aligned</p>
</div>
```

### Vertical Alignment

Here are the available vertical alignment classes:

```css
.txtt { vertical-align: top; }
.txtm { vertical-align: middle; }
.txtb { vertical-align: bottom; }
.txttt { vertical-align: text-top; }
.txttb { vertical-align: text-bottom; }
```

```html_example
<p class="large-heading">
    This uses 
    <small class="txtt">some txtt text,</small> 
    <small class="txtm">some txtm text,</small> 
    <small class="txtb">and some txtb text</small>
</p>
```

<br/>

## Display Classes

<table>
    <thead>
        <tr>
            <th>Class</th>
            <th>Effect</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>`.visuallyhidden`</td>
            <td>Hides the element visually, but ensures that a screen reader will read it.</td>
        </tr>
        <tr>
            <td>`.no-js-hide`</td>
            <td>Hides an element when javascript is disabled in the browser.</td>
        </tr>
        <tr>
            <td>`.block`</td>
            <td>`display: block;`</td>
        </tr>
        <tr>
            <td>`.inline-block`</td>
            <td>`display: inline-block;`</td>
        </tr>
        <tr>
            <td>`.inline`</td>
            <td>`display: inline;`</td>
        </tr>
        <tr>
            <td>`.nowrap`</td>
            <td>`white-space: none;`</td>
        </tr>
        <tr>
            <td>`.required`</td>
            <td>`color: $bonsai-alert;`</td>
        </tr>
        <tr>
            <td>`.non-responsive`</td>
            <td>`max-width: none;`</td>
        </tr>
    </tbody>
</table>

<br/>

## Spacing Classes

Bonsai generates a series of spacing utilities that are meant to help you position 
your page elements in just the right spot, without constantly having to write classes
just to move something over by a few pixels.

The class names are generated by creating acronyms for the intention of the spacing effect. For example, to apply
a large amount of padding to all sides of an element you would use the class `.pal`, which stands for "padding all large".

Combine <span class="small-heading light-blue-background">spacing type</span>, 
<span class="small-heading light-green-background">spacing direction</span>, and
<span class="small-heading light-yellow-background">spacing amount</span> in that order to make your class.

<table>
    <thead>
        <tr>
            <th>Spacing Intention</th>
            <th>Name</th>
            <th>Key</th>
            <th>Effect</th>
        </tr>
    </thead>
    <tbody>
        <tr class="light-blue-background">
            <th rowspan="2">Type</th>
            <td>Padding</td>
            <td>`p`</td>
            <td></td>
        </tr>
        <tr class="light-blue-background">
            <td>Margin</td>
            <td>`m`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <th rowspan="7">Direction</th>
            <td>All</td>
            <td>`a`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Vertical</td>
            <td>`v`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Horizontal</td>
            <td>`h`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Top</td>
            <td>`t`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Bottom</td>
            <td>`b`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Left</td>
            <td>`l`</td>
            <td></td>
        </tr>
        <tr class="light-green-background">
            <td>Right</td>
            <td>`r`</td>
            <td></td>
        </tr>
        <tr class="light-yellow-background">
            <th rowspan="7">Amount</th>
            <td>None</td>
            <td>`n`</td>
            <td>0px</td>
        </tr>
        <tr class="light-yellow-background">
            <td>Extra Small</td>
            <td>`xs`</td>
            <td>4px</td>
        </tr>
        <tr class="light-yellow-background">
            <td>Small</td>
            <td>`s`</td>
            <td>8px</td>
        </tr>
        <tr class="light-yellow-background">
            <td>Medium</td>
            <td>`m`</td>
            <td>16px</td>
        </tr>
        <tr class="light-yellow-background">
            <td>Large</td>
            <td>`l`</td>
            <td>24px</td>
        </tr>
        <tr class="light-yellow-background">
            <td>Extra Large</td>
            <td>`xl`</td>
            <td>32px</td>
        </tr>
    </tbody>
</table>

### Examples

<div class="row">
    <div class="columns small-7">
        <table>
            <thead>
                <tr>
                    <th>
                        Intention
                    </th>
                    <th>
                        CSS Class
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span class="light-blue-background">Margin</span> 
                        <span class="light-green-background">Horizontal</span>
                        <span class="light-yellow-background">None</span>
                    </td>
                    <td>
                        `.mhn`
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="light-blue-background">Padding</span> 
                        <span class="light-green-background">All</span>
                        <span class="light-yellow-background">Large</span>
                    </td>
                    <td>
                        `.pal`
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="light-blue-background">Margin</span> 
                        <span class="light-green-background">Top</span>
                        <span class="light-yellow-background">Extra Small</span>
                    </td>
                    <td>
                        `.mtxs`
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>