css.html

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">
{% endhighlight %}

        </section>



        <!-- Icons
        ================================================== -->
        <section id="icons">
          <div class="page-header">
            <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
          </div>

          <h2>Included glyphs</h2>
          <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>

          <ul class="the-icons clearfix">
            <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
            <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
            <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
            <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
            <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
            <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
            <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
            <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
            <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
            <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
            <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
            <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
            <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
            <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
            <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
            <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
            <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
            <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
            <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
            <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
            <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
            <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
            <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
            <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
            <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
            <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
            <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
            <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>

            <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
            <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
            <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
            <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
            <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
            <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
            <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
            <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
            <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
            <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
            <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
            <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
            <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
            <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
            <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
            <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
            <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
            <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
            <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
            <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
            <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
            <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
            <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
            <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
            <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
            <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
            <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
            <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>

            <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
            <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
            <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
            <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
            <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
            <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
            <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
            <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
            <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
            <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
            <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
            <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
            <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
            <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
            <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
            <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
            <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
            <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
            <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
            <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
            <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
            <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
            <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
            <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
            <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
            <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
            <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
            <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>

            <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
            <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
            <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
            <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
            <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
            <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
            <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
            <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
            <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
            <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
            <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
            <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
            <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
            <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
            <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
            <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
            <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
            <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
            <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
            <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
            <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
            <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
            <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
            <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
            <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
            <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
            <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
            <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>

            <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
            <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
            <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
            <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
            <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
            <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
            <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
            <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
            <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
            <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
            <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
            <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
            <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
            <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
            <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
            <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
            <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
            <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
            <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
            <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
            <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
            <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
            <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
            <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
            <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
            <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
            <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
            <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>

            <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
            <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
            <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
            <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
            <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
            <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
            <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
            <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
            <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
            <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
            <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
            <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
            <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
            <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
            <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
            <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
            <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
            <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
            <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
            <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>

          </ul>

          <h3>Glyphicons attribution</h3>
          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>


          <h2>How to use</h2>
          <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
{% highlight html linenos %}
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}
          <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
          <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>


          <h2>Icon examples</h2>
          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>

          <h4>Buttons</h4>

          <h5>Button group in a button toolbar</h5>
          <div class="bs-docs-example">
            <div class="btn-toolbar">
              <div class="btn-group">
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
              </div>
            </div>
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
  </div>
</div>
{% endhighlight %}

          <h5>Dropdown in a button group</h5>
          <div class="bs-docs-example">
            <div class="btn-group">
              <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
              </ul>
            </div>
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-group">
  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
  </ul>
</div>
{% endhighlight %}

          <h5>Large button</h5>
          <div class="bs-docs-example">
            <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %}

          <h5>Small button</h5>
          <div class="bs-docs-example">
            <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %}


          <h4>Navigation</h4>
          <div class="bs-docs-example">
            <ul class="nav nav-list">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
            </ul>
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<ul class="nav nav-list">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul>
{% endhighlight %}

          <h4>Form fields</h4>
          <form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputIcon">Email address</label>
              <div class="controls">
                <div class="input-group">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                  <input class="span2" id="inputIcon" type="text">
                </div>
              </div>
            </div>
          </form>
{% highlight html linenos %}
<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>
{% endhighlight %}

        </section>



        <!-- Responsive design
        ================================================== -->
        <section id="responsive-utilities">
          <div class="page-header">
            <h1>Responsive utilities</h1>
          </div>
          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>

          <h3>Responsive classes</h3>
          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
            <thead>
              <tr>
                <th>Class</th>
                <th>Phones <small>767px and below</small></th>
                <th>Tablets <small>979px to 768px</small></th>
                <th>Desktops <small>Default</small></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th><code>.visible-phone</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-hidden">Hidden</td>
              </tr>
              <tr>
                <th><code>.visible-tablet</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
              </tr>
              <tr>
                <th><code>.visible-desktop</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-phone</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-tablet</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-desktop</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
              </tr>
            </tbody>
          </table>

          <h3>Print classes</h3>
          <table class="table table-bordered table-striped responsive-utilities">
            <thead>
              <tr>
                <th>Class</th>
                <th>Browser</th>
                <th>Print</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th><code>.visible-print</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-print</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
              </tr>
            </tbody>
          </table>

          <h3>When to use</h3>
          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>

          <h3>Test case</h3>
          <p>Resize your browser or load on different devices to test the above classes.</p>
          <h4>Visible on...</h4>
          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
          <ul class="responsive-utilities-test">
            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
          </ul>
          <h4>Hidden on...</h4>
          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
          <ul class="responsive-utilities-test hidden-on">
            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
          </ul>

        </section>



      </div><!-- /span9 -->
    </div><!-- row -->

  </div><!-- /.container -->