Demo library based on Bootstrap CSS framework.

<p>
    Demo library based on <a href="https://getbootstrap.com/">Bootstrap</a> CSS framework.
</p>

Foundation

Colors

Palette

Primary

#428BCA

#3874A9
Success

#5CB85C

#4D984D
Info

#5BC0DE

#59A4C4
Warning

#F0AD4E

#BA8540
Danger

#D9534F

#B04341

<ul class="cl-palette">
    <li>
        <h3>Primary</h3>
        <div style="background-color: #428BCA;" class="color"><span>#428BCA</span></div>
        <div style="background-color: #3874A9;" class="color"><span>#3874A9</span></div>
    </li>
    <li>
        <h3>Success</h3>
        <div style="background-color: #5CB85C;" class="color"><span>#5CB85C</span></div>
        <div style="background-color: #4D984D;" class="color"><span>#4D984D</span></div>
    </li>
    <li>
        <h3>Info</h3>
        <div style="background-color: #5BC0DE;" class="color"><span>#5BC0DE</span></div>
        <div style="background-color: #59A4C4;" class="color"><span>#59A4C4</span></div>
    </li>
    <li>
        <h3>Warning</h3>
        <div style="background-color: #F0AD4E;" class="color"><span>#F0AD4E</span></div>
        <div style="background-color: #BA8540;" class="color"><span>#BA8540</span></div>
    </li>
    <li>
        <h3>Danger</h3>
        <div style="background-color: #D9534F;" class="color"><span>#D9534F</span></div>
        <div style="background-color: #B04341;" class="color"><span>#B04341</span></div>
    </li>
</ul>

Color classes

Muted text

Primary text

Info text

Success text

Danger text

Warning text

<p class="text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
<p class="text-info">Info text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>

Background utilities

Primary Background

Info Background

Success Background

Danger Background

Warning Background

<p class="bg-primary" style="padding:15px;">Primary Background</p>
<p class="bg-info" style="padding:15px;">Info Background</p>
<p class="bg-success" style="padding:15px;">Success Background</p>
<p class="bg-danger" style="padding:15px;">Danger Background</p>
<p class="bg-warning" style="padding:15px;">Warning Background</p>

Grid

Simple grid

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="container">
    <div class="row cl-show-grid">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
</address>

Alerts

Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Error Message! Numquam quos fuga quam suscipit sapiente perferendis magnam.

Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.

Info Message! Consequatur facere deleniti cumque ducimus maiores nemo.

<div class="alert alert-warning">
    <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger">
    <strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success">
    <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info">
    <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>

Badges

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>
            Home
        </a>
    </li>
    <li><a href="#">Profile</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>
            Messages
        </a>
    </li>
</ul>
<br>
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>

Buttons

Basic

<p>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
</p>
<p>
    <button type="button" class="btn btn-default disabled">Default</button>
    <button type="button" class="btn btn-primary disabled">Primary</button>
    <button type="button" class="btn btn-success disabled">Success</button>
    <button type="button" class="btn btn-info disabled">Info</button>
    <button type="button" class="btn btn-warning disabled">Warning</button>
    <button type="button" class="btn btn-danger disabled">Danger</button>
    <button type="button" class="btn btn-link disabled">Link</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-lg">Large</button>
    <button type="button" class="btn btn-primary disabled">Disabled</button>
    <button type="button" class="btn btn-primary">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Small</button>
    <button type="button" class="btn btn-primary btn-xs">Extra Small</button>
</p>

Button groups

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-xs">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
    </div>
</div>

Justified

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

Vertical

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Button</button>
    <button type="button" class="btn btn-default">Button</button>
    <div class="btn-group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">Dropdown
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-default">Button</button>
</div>

With dropdowns

<div class="row">
    <div class="col-md-12">
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown</button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <div class="col-md-12">
        <!--split-->
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Toggle Dropdown</span><span
                    class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span
                    class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span
                    class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span
                    class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span
                    class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <div class="col-md-12">
        <!-- Large button group -->
        <div class="btn-group">
            <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Large button
            </button>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </div>
        <!-- Small button group -->
        <div class="btn-group">
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Small button
            </button>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </div>
        <!-- Extra small button group -->
        <div class="btn-group">
            <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Extra small
                button
            </button>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </div>
    </div>
</div>

Definition lists

Vertical

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Horizontal

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    <dt>Felis euismod semper eget lacinia</dt>
    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
        risus.
    </dd>
</dl>

Dropdowns

<div class="dropdown">
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>
<div class="dropdown clearfix">
    <!-- Link or button to toggle dropdown -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;">
        <li class="dropdown-header">Dropdown header</li>
        <li class="disabled">
            <a tabindex="-1" href="#">Action</a>
        </li>
        <li>
            <a tabindex="-1" href="#">Another action</a>
        </li>
        <li>
            <a tabindex="-1" href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li>
            <a tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>

Forms

Basic example

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Inline form

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

Horizontal form

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>

Images

<p>
    <img src="//placehold.it/120x120" class="img-rounded">
    <img src="//placehold.it/120x120" class="img-circle">
    <img src="//placehold.it/120x120" class="img-thumbnail">
</p>
<p>
<img src="//placehold.it/1200x300" class="img-responsive"/>

Labels

Example heading New

Default Primary Success Info Warning Danger

<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Tables

#	First Name	Tables
1	Michael	Are formatted like this
2	Lucille	Do you like them?
3	Success
4	Danger
5	Warning
6	Active

Striped & condensed table with alternating backgrounds

#	First Name	Tables
1	Michael	This one is bordered and condensed
2	Lucille	Do you still like it?

<table class="table table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Tables</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Michael</td>
        <td>Are formatted like this</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lucille</td>
        <td>Do you like them?</td>
    </tr>
    <tr class="success">
        <td>3</td>
        <td>Success</td>
        <td></td>
    </tr>
    <tr class="danger">
        <td>4</td>
        <td>Danger</td>
        <td></td>
    </tr>
    <tr class="warning">
        <td>5</td>
        <td>Warning</td>
        <td></td>
    </tr>
    <tr class="active">
        <td>6</td>
        <td>Active</td>
        <td></td>
    </tr>
    </tbody>
</table>
<h3>Striped &amp; condensed table with alternating backgrounds</h3>
<table class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Tables</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Michael</td>
        <td>This one is bordered and condensed</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lucille</td>
        <td>Do you still like it?</td>
    </tr>
    </tbody>
</table>

Typography

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Blockquote reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Emphasis

Bold text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<strong>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</strong>

Italics text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<em>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</em>

Small text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<small>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</small>

Lists

List inline

List Item 1
List Item 2
List Item 3
List Item 4

<ul class="list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

List ordered

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.3
- List Item 3.4
List Item 4

<ol>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ol>

List unordered

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.3
- List Item 3.4
List Item 4

<ul>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ul>

List unstyled

List Item 1
List Item 2
List Item 3
List Item 4

<ul class="list-unstyled">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

Body copy

Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

<p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
    non commodo luctus.</p>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lead copy

This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.

<p class="lead">This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.</p>

Links

Default link

<a href="#">Default link</a>

Text alignment

Left Alignment

Center Alignment

Right Alignment

Justified Text

<p class="text-left">Left Alignment</p>
<p class="text-center">Center Alignment</p>
<p class="text-right">Right Alignment</p>
<p class="text-justify">Justified Text</p>

Well

Look, I'm in a well!

Small Well

Large Padding Well

<div class="well">
    Look, I'm in a well!
</div>
<div class="well well-sm">
    Small Well
</div>
<div class="well well-lg">
    Large Padding Well
</div>

Icons

All icons are listed below and can only be used using the fa class.

glass
music
search
envelope-o
heart
star
star-o
user
film
th-large
th
th-list
check
remove
close
times
search-plus
search-minus
power-off
signal
gear
cog
trash-o
home
file-o
clock-o
road
download
arrow-circle-o-down
arrow-circle-o-up
inbox
play-circle-o
rotate-right
repeat
refresh
list-alt
lock
flag
headphones
volume-off
volume-down
volume-up
qrcode
barcode
tag
tags
book
bookmark
print
camera
font
bold
italic
text-height
text-width
align-left
align-center
align-right
align-justify
list
dedent
outdent
indent
video-camera
photo
image
picture-o
pencil
map-marker
adjust
tint
edit
pencil-square-o
share-square-o
check-square-o
arrows
step-backward
fast-backward
backward
play
pause
stop
forward
fast-forward
step-forward
eject
chevron-left
chevron-right
plus-circle
minus-circle
times-circle
check-circle
question-circle
info-circle
crosshairs
times-circle-o
check-circle-o
ban
arrow-left
arrow-right
arrow-up
arrow-down
mail-forward
share
expand
compress
plus
minus
asterisk
exclamation-circle
gift
leaf
fire
eye
eye-slash
warning
exclamation-triangle
plane
calendar
random
comment
magnet
chevron-up
chevron-down
retweet
shopping-cart
folder
folder-open
arrows-v
arrows-h
bar-chart-o
bar-chart
twitter-square
facebook-square
camera-retro
key
gears
cogs
comments
thumbs-o-up
thumbs-o-down
star-half
heart-o
sign-out
linkedin-square
thumb-tack
external-link
sign-in
trophy
github-square
upload
lemon-o
phone
square-o
bookmark-o
phone-square
twitter
facebook-f
facebook
github
unlock
credit-card
feed
rss
hdd-o
bullhorn
bell
certificate
hand-o-right
hand-o-left
hand-o-up
hand-o-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-circle-down
globe
wrench
tasks
filter
briefcase
arrows-alt
group
users
chain
link
cloud
flask
cut
scissors
copy
files-o
paperclip
save
floppy-o
square
navicon
reorder
bars
list-ul
list-ol
strikethrough
underline
table
magic
truck
pinterest
pinterest-square
google-plus-square
google-plus
money
caret-down
caret-up
caret-left
caret-right
columns
unsorted
sort
sort-down
sort-desc
sort-up
sort-asc
envelope
linkedin
rotate-left
undo
legal
gavel
dashboard
tachometer
comment-o
comments-o
flash
bolt
sitemap
umbrella
paste
clipboard
lightbulb-o
exchange
cloud-download
cloud-upload
user-md
stethoscope
suitcase
bell-o
coffee
cutlery
file-text-o
building-o
hospital-o
ambulance
medkit
fighter-jet
beer
h-square
plus-square
angle-double-left
angle-double-right
angle-double-up
angle-double-down
angle-left
angle-right
angle-up
angle-down
desktop
laptop
tablet
mobile-phone
mobile
circle-o
quote-left
quote-right
spinner
circle
mail-reply
reply
github-alt
folder-o
folder-open-o
smile-o
frown-o
meh-o
gamepad
keyboard-o
flag-o
flag-checkered
terminal
code
mail-reply-all
reply-all
star-half-empty
star-half-full
star-half-o
location-arrow
crop
code-fork
unlink
chain-broken
question
info
exclamation
superscript
subscript
eraser
puzzle-piece
microphone
microphone-slash
shield
calendar-o
fire-extinguisher
rocket
maxcdn
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-circle-down
html5
css3
anchor
unlock-alt
bullseye
ellipsis-h
ellipsis-v
rss-square
play-circle
ticket
minus-square
minus-square-o
level-up
level-down
check-square
pencil-square
external-link-square
share-square
compass
toggle-down
caret-square-o-down
toggle-up
caret-square-o-up
toggle-right
caret-square-o-right
euro
eur
gbp
dollar
usd
rupee
inr
cny
rmb
yen
jpy
ruble
rouble
rub
won
krw
bitcoin
btc
file
file-text
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-numeric-asc
sort-numeric-desc
thumbs-up
thumbs-down
youtube-square
youtube
xing
xing-square
youtube-play
dropbox
stack-overflow
instagram
flickr
adn
bitbucket
bitbucket-square
tumblr
tumblr-square
long-arrow-down
long-arrow-up
long-arrow-left
long-arrow-right
apple
windows
android
linux
dribbble
skype
foursquare
trello
female
male
gittip
gratipay
sun-o
moon-o
archive
bug
vk
weibo
renren
pagelines
stack-exchange
arrow-circle-o-right
arrow-circle-o-left
toggle-left
caret-square-o-left
dot-circle-o
wheelchair
vimeo-square
turkish-lira
try
plus-square-o
space-shuttle
slack
envelope-square
wordpress
openid
institution
bank
university
mortar-board
graduation-cap
yahoo
google
reddit
reddit-square
stumbleupon-circle
stumbleupon
delicious
digg
pied-piper-pp
pied-piper-alt
drupal
joomla
language
fax
building
child
paw
spoon
cube
cubes
behance
behance-square
steam
steam-square
recycle
automobile
car
cab
taxi
tree
spotify
deviantart
soundcloud
database
file-pdf-o
file-word-o
file-excel-o
file-powerpoint-o
file-photo-o
file-picture-o
file-image-o
file-zip-o
file-archive-o
file-sound-o
file-audio-o
file-movie-o
file-video-o
file-code-o
vine
codepen
jsfiddle
life-bouy
life-buoy
life-saver
support
life-ring
circle-o-notch
ra
resistance
rebel
ge
empire
git-square
git
y-combinator-square
yc-square
hacker-news
tencent-weibo
qq
wechat
weixin
send
paper-plane
send-o
paper-plane-o
history
circle-thin
header
paragraph
sliders
share-alt
share-alt-square
bomb
soccer-ball-o
futbol-o
tty
binoculars
plug
slideshare
twitch
yelp
newspaper-o
wifi
calculator
paypal
google-wallet
cc-visa
cc-mastercard
cc-discover
cc-amex
cc-paypal
cc-stripe
bell-slash
bell-slash-o
trash
copyright
at
eyedropper
paint-brush
birthday-cake
area-chart
pie-chart
line-chart
lastfm
lastfm-square
toggle-off
toggle-on
bicycle
bus
ioxhost
angellist
cc
shekel
sheqel
ils
meanpath
buysellads
connectdevelop
dashcube
forumbee
leanpub
sellsy
shirtsinbulk
simplybuilt
skyatlas
cart-plus
cart-arrow-down
diamond
ship
user-secret
motorcycle
street-view
heartbeat
venus
mars
mercury
intersex
transgender
transgender-alt
venus-double
mars-double
venus-mars
mars-stroke
mars-stroke-v
mars-stroke-h
neuter
genderless
facebook-official
pinterest-p
whatsapp
server
user-plus
user-times
hotel
bed
viacoin
train
subway
medium
yc
y-combinator
optin-monster
opencart
expeditedssl
battery-4
battery-full
battery-3
battery-three-quarters
battery-2
battery-half
battery-1
battery-quarter
battery-0
battery-empty
mouse-pointer
i-cursor
object-group
object-ungroup
sticky-note
sticky-note-o
cc-jcb
cc-diners-club
clone
balance-scale
hourglass-o
hourglass-1
hourglass-start
hourglass-2
hourglass-half
hourglass-3
hourglass-end
hourglass
hand-grab-o
hand-rock-o
hand-stop-o
hand-paper-o
hand-scissors-o
hand-lizard-o
hand-spock-o
hand-pointer-o
hand-peace-o
trademark
registered
creative-commons
gg
gg-circle
tripadvisor
odnoklassniki
odnoklassniki-square
get-pocket
wikipedia-w
safari
chrome
firefox
opera
internet-explorer
tv
television
contao
500px
amazon
calendar-plus-o
calendar-minus-o
calendar-times-o
calendar-check-o
industry
map-pin
map-signs
map-o
map
commenting
commenting-o
houzz
vimeo
black-tie
fonticons
reddit-alien
edge
credit-card-alt
codiepie
modx
fort-awesome
usb
product-hunt
mixcloud
scribd
pause-circle
pause-circle-o
stop-circle
stop-circle-o
shopping-bag
shopping-basket
hashtag
bluetooth
bluetooth-b
percent
gitlab
wpbeginner
wpforms
envira
universal-access
wheelchair-alt
question-circle-o
blind
audio-description
volume-control-phone
braille
assistive-listening-systems
asl-interpreting
american-sign-language-interpreting
deafness
hard-of-hearing
deaf
glide
glide-g
signing
sign-language
low-vision
viadeo
viadeo-square
snapchat
snapchat-ghost
snapchat-square
pied-piper
first-order
yoast
themeisle
google-plus-circle
google-plus-official
fa
font-awesome

<p>
    All icons are listed below and can only be used using the <code>fa</code> class.
    <i class="fa fa-info-circle"></i>
</p>

<ul class="cl-icon-list">
    <li>
        <span><i class="fa fa-glass"></i></span>
        <span>glass</span>
    </li>
    <li>
        <span><i class="fa fa-music"></i></span>
        <span>music</span>
    </li>
    <li>
        <span><i class="fa fa-search"></i></span>
        <span>search</span>
    </li>
    <li>
        <span><i class="fa fa-envelope-o"></i></span>
        <span>envelope-o</span>
    </li>
    <li>
        <span><i class="fa fa-heart"></i></span>
        <span>heart</span>
    </li>
    <li>
        <span><i class="fa fa-star"></i></span>
        <span>star</span>
    </li>
    <li>
        <span><i class="fa fa-star-o"></i></span>
        <span>star-o</span>
    </li>
    <li>
        <span><i class="fa fa-user"></i></span>
        <span>user</span>
    </li>
    <li>
        <span><i class="fa fa-film"></i></span>
        <span>film</span>
    </li>
    <li>
        <span><i class="fa fa-th-large"></i></span>
        <span>th-large</span>
    </li>
    <li>
        <span><i class="fa fa-th"></i></span>
        <span>th</span>
    </li>
    <li>
        <span><i class="fa fa-th-list"></i></span>
        <span>th-list</span>
    </li>
    <li>
        <span><i class="fa fa-check"></i></span>
        <span>check</span>
    </li>
    <li>
        <span><i class="fa fa-remove"></i></span>
        <span>remove</span>
    </li>
    <li>
        <span><i class="fa fa-close"></i></span>
        <span>close</span>
    </li>
    <li>
        <span><i class="fa fa-times"></i></span>
        <span>times</span>
    </li>
    <li>
        <span><i class="fa fa-search-plus"></i></span>
        <span>search-plus</span>
    </li>
    <li>
        <span><i class="fa fa-search-minus"></i></span>
        <span>search-minus</span>
    </li>
    <li>
        <span><i class="fa fa-power-off"></i></span>
        <span>power-off</span>
    </li>
    <li>
        <span><i class="fa fa-signal"></i></span>
        <span>signal</span>
    </li>
    <li>
        <span><i class="fa fa-gear"></i></span>
        <span>gear</span>
    </li>
    <li>
        <span><i class="fa fa-cog"></i></span>
        <span>cog</span>
    </li>
    <li>
        <span><i class="fa fa-trash-o"></i></span>
        <span>trash-o</span>
    </li>
    <li>
        <span><i class="fa fa-home"></i></span>
        <span>home</span>
    </li>
    <li>
        <span><i class="fa fa-file-o"></i></span>
        <span>file-o</span>
    </li>
    <li>
        <span><i class="fa fa-clock-o"></i></span>
        <span>clock-o</span>
    </li>
    <li>
        <span><i class="fa fa-road"></i></span>
        <span>road</span>
    </li>
    <li>
        <span><i class="fa fa-download"></i></span>
        <span>download</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-down"></i></span>
        <span>arrow-circle-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-up"></i></span>
        <span>arrow-circle-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-inbox"></i></span>
        <span>inbox</span>
    </li>
    <li>
        <span><i class="fa fa-play-circle-o"></i></span>
        <span>play-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-rotate-right"></i></span>
        <span>rotate-right</span>
    </li>
    <li>
        <span><i class="fa fa-repeat"></i></span>
        <span>repeat</span>
    </li>
    <li>
        <span><i class="fa fa-refresh"></i></span>
        <span>refresh</span>
    </li>
    <li>
        <span><i class="fa fa-list-alt"></i></span>
        <span>list-alt</span>
    </li>
    <li>
        <span><i class="fa fa-lock"></i></span>
        <span>lock</span>
    </li>
    <li>
        <span><i class="fa fa-flag"></i></span>
        <span>flag</span>
    </li>
    <li>
        <span><i class="fa fa-headphones"></i></span>
        <span>headphones</span>
    </li>
    <li>
        <span><i class="fa fa-volume-off"></i></span>
        <span>volume-off</span>
    </li>
    <li>
        <span><i class="fa fa-volume-down"></i></span>
        <span>volume-down</span>
    </li>
    <li>
        <span><i class="fa fa-volume-up"></i></span>
        <span>volume-up</span>
    </li>
    <li>
        <span><i class="fa fa-qrcode"></i></span>
        <span>qrcode</span>
    </li>
    <li>
        <span><i class="fa fa-barcode"></i></span>
        <span>barcode</span>
    </li>
    <li>
        <span><i class="fa fa-tag"></i></span>
        <span>tag</span>
    </li>
    <li>
        <span><i class="fa fa-tags"></i></span>
        <span>tags</span>
    </li>
    <li>
        <span><i class="fa fa-book"></i></span>
        <span>book</span>
    </li>
    <li>
        <span><i class="fa fa-bookmark"></i></span>
        <span>bookmark</span>
    </li>
    <li>
        <span><i class="fa fa-print"></i></span>
        <span>print</span>
    </li>
    <li>
        <span><i class="fa fa-camera"></i></span>
        <span>camera</span>
    </li>
    <li>
        <span><i class="fa fa-font"></i></span>
        <span>font</span>
    </li>
    <li>
        <span><i class="fa fa-bold"></i></span>
        <span>bold</span>
    </li>
    <li>
        <span><i class="fa fa-italic"></i></span>
        <span>italic</span>
    </li>
    <li>
        <span><i class="fa fa-text-height"></i></span>
        <span>text-height</span>
    </li>
    <li>
        <span><i class="fa fa-text-width"></i></span>
        <span>text-width</span>
    </li>
    <li>
        <span><i class="fa fa-align-left"></i></span>
        <span>align-left</span>
    </li>
    <li>
        <span><i class="fa fa-align-center"></i></span>
        <span>align-center</span>
    </li>
    <li>
        <span><i class="fa fa-align-right"></i></span>
        <span>align-right</span>
    </li>
    <li>
        <span><i class="fa fa-align-justify"></i></span>
        <span>align-justify</span>
    </li>
    <li>
        <span><i class="fa fa-list"></i></span>
        <span>list</span>
    </li>
    <li>
        <span><i class="fa fa-dedent"></i></span>
        <span>dedent</span>
    </li>
    <li>
        <span><i class="fa fa-outdent"></i></span>
        <span>outdent</span>
    </li>
    <li>
        <span><i class="fa fa-indent"></i></span>
        <span>indent</span>
    </li>
    <li>
        <span><i class="fa fa-video-camera"></i></span>
        <span>video-camera</span>
    </li>
    <li>
        <span><i class="fa fa-photo"></i></span>
        <span>photo</span>
    </li>
    <li>
        <span><i class="fa fa-image"></i></span>
        <span>image</span>
    </li>
    <li>
        <span><i class="fa fa-picture-o"></i></span>
        <span>picture-o</span>
    </li>
    <li>
        <span><i class="fa fa-pencil"></i></span>
        <span>pencil</span>
    </li>
    <li>
        <span><i class="fa fa-map-marker"></i></span>
        <span>map-marker</span>
    </li>
    <li>
        <span><i class="fa fa-adjust"></i></span>
        <span>adjust</span>
    </li>
    <li>
        <span><i class="fa fa-tint"></i></span>
        <span>tint</span>
    </li>
    <li>
        <span><i class="fa fa-edit"></i></span>
        <span>edit</span>
    </li>
    <li>
        <span><i class="fa fa-pencil-square-o"></i></span>
        <span>pencil-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-share-square-o"></i></span>
        <span>share-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-check-square-o"></i></span>
        <span>check-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-arrows"></i></span>
        <span>arrows</span>
    </li>
    <li>
        <span><i class="fa fa-step-backward"></i></span>
        <span>step-backward</span>
    </li>
    <li>
        <span><i class="fa fa-fast-backward"></i></span>
        <span>fast-backward</span>
    </li>
    <li>
        <span><i class="fa fa-backward"></i></span>
        <span>backward</span>
    </li>
    <li>
        <span><i class="fa fa-play"></i></span>
        <span>play</span>
    </li>
    <li>
        <span><i class="fa fa-pause"></i></span>
        <span>pause</span>
    </li>
    <li>
        <span><i class="fa fa-stop"></i></span>
        <span>stop</span>
    </li>
    <li>
        <span><i class="fa fa-forward"></i></span>
        <span>forward</span>
    </li>
    <li>
        <span><i class="fa fa-fast-forward"></i></span>
        <span>fast-forward</span>
    </li>
    <li>
        <span><i class="fa fa-step-forward"></i></span>
        <span>step-forward</span>
    </li>
    <li>
        <span><i class="fa fa-eject"></i></span>
        <span>eject</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-left"></i></span>
        <span>chevron-left</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-right"></i></span>
        <span>chevron-right</span>
    </li>
    <li>
        <span><i class="fa fa-plus-circle"></i></span>
        <span>plus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-minus-circle"></i></span>
        <span>minus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-times-circle"></i></span>
        <span>times-circle</span>
    </li>
    <li>
        <span><i class="fa fa-check-circle"></i></span>
        <span>check-circle</span>
    </li>
    <li>
        <span><i class="fa fa-question-circle"></i></span>
        <span>question-circle</span>
    </li>
    <li>
        <span><i class="fa fa-info-circle"></i></span>
        <span>info-circle</span>
    </li>
    <li>
        <span><i class="fa fa-crosshairs"></i></span>
        <span>crosshairs</span>
    </li>
    <li>
        <span><i class="fa fa-times-circle-o"></i></span>
        <span>times-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-check-circle-o"></i></span>
        <span>check-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-ban"></i></span>
        <span>ban</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-left"></i></span>
        <span>arrow-left</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-right"></i></span>
        <span>arrow-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-up"></i></span>
        <span>arrow-up</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-down"></i></span>
        <span>arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-mail-forward"></i></span>
        <span>mail-forward</span>
    </li>
    <li>
        <span><i class="fa fa-share"></i></span>
        <span>share</span>
    </li>
    <li>
        <span><i class="fa fa-expand"></i></span>
        <span>expand</span>
    </li>
    <li>
        <span><i class="fa fa-compress"></i></span>
        <span>compress</span>
    </li>
    <li>
        <span><i class="fa fa-plus"></i></span>
        <span>plus</span>
    </li>
    <li>
        <span><i class="fa fa-minus"></i></span>
        <span>minus</span>
    </li>
    <li>
        <span><i class="fa fa-asterisk"></i></span>
        <span>asterisk</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation-circle"></i></span>
        <span>exclamation-circle</span>
    </li>
    <li>
        <span><i class="fa fa-gift"></i></span>
        <span>gift</span>
    </li>
    <li>
        <span><i class="fa fa-leaf"></i></span>
        <span>leaf</span>
    </li>
    <li>
        <span><i class="fa fa-fire"></i></span>
        <span>fire</span>
    </li>
    <li>
        <span><i class="fa fa-eye"></i></span>
        <span>eye</span>
    </li>
    <li>
        <span><i class="fa fa-eye-slash"></i></span>
        <span>eye-slash</span>
    </li>
    <li>
        <span><i class="fa fa-warning"></i></span>
        <span>warning</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation-triangle"></i></span>
        <span>exclamation-triangle</span>
    </li>
    <li>
        <span><i class="fa fa-plane"></i></span>
        <span>plane</span>
    </li>
    <li>
        <span><i class="fa fa-calendar"></i></span>
        <span>calendar</span>
    </li>
    <li>
        <span><i class="fa fa-random"></i></span>
        <span>random</span>
    </li>
    <li>
        <span><i class="fa fa-comment"></i></span>
        <span>comment</span>
    </li>
    <li>
        <span><i class="fa fa-magnet"></i></span>
        <span>magnet</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-up"></i></span>
        <span>chevron-up</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-down"></i></span>
        <span>chevron-down</span>
    </li>
    <li>
        <span><i class="fa fa-retweet"></i></span>
        <span>retweet</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-cart"></i></span>
        <span>shopping-cart</span>
    </li>
    <li>
        <span><i class="fa fa-folder"></i></span>
        <span>folder</span>
    </li>
    <li>
        <span><i class="fa fa-folder-open"></i></span>
        <span>folder-open</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-v"></i></span>
        <span>arrows-v</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-h"></i></span>
        <span>arrows-h</span>
    </li>
    <li>
        <span><i class="fa fa-bar-chart-o"></i></span>
        <span>bar-chart-o</span>
    </li>
    <li>
        <span><i class="fa fa-bar-chart"></i></span>
        <span>bar-chart</span>
    </li>
    <li>
        <span><i class="fa fa-twitter-square"></i></span>
        <span>twitter-square</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-square"></i></span>
        <span>facebook-square</span>
    </li>
    <li>
        <span><i class="fa fa-camera-retro"></i></span>
        <span>camera-retro</span>
    </li>
    <li>
        <span><i class="fa fa-key"></i></span>
        <span>key</span>
    </li>
    <li>
        <span><i class="fa fa-gears"></i></span>
        <span>gears</span>
    </li>
    <li>
        <span><i class="fa fa-cogs"></i></span>
        <span>cogs</span>
    </li>
    <li>
        <span><i class="fa fa-comments"></i></span>
        <span>comments</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-o-up"></i></span>
        <span>thumbs-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-o-down"></i></span>
        <span>thumbs-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-star-half"></i></span>
        <span>star-half</span>
    </li>
    <li>
        <span><i class="fa fa-heart-o"></i></span>
        <span>heart-o</span>
    </li>
    <li>
        <span><i class="fa fa-sign-out"></i></span>
        <span>sign-out</span>
    </li>
    <li>
        <span><i class="fa fa-linkedin-square"></i></span>
        <span>linkedin-square</span>
    </li>
    <li>
        <span><i class="fa fa-thumb-tack"></i></span>
        <span>thumb-tack</span>
    </li>
    <li>
        <span><i class="fa fa-external-link"></i></span>
        <span>external-link</span>
    </li>
    <li>
        <span><i class="fa fa-sign-in"></i></span>
        <span>sign-in</span>
    </li>
    <li>
        <span><i class="fa fa-trophy"></i></span>
        <span>trophy</span>
    </li>
    <li>
        <span><i class="fa fa-github-square"></i></span>
        <span>github-square</span>
    </li>
    <li>
        <span><i class="fa fa-upload"></i></span>
        <span>upload</span>
    </li>
    <li>
        <span><i class="fa fa-lemon-o"></i></span>
        <span>lemon-o</span>
    </li>
    <li>
        <span><i class="fa fa-phone"></i></span>
        <span>phone</span>
    </li>
    <li>
        <span><i class="fa fa-square-o"></i></span>
        <span>square-o</span>
    </li>
    <li>
        <span><i class="fa fa-bookmark-o"></i></span>
        <span>bookmark-o</span>
    </li>
    <li>
        <span><i class="fa fa-phone-square"></i></span>
        <span>phone-square</span>
    </li>
    <li>
        <span><i class="fa fa-twitter"></i></span>
        <span>twitter</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-f"></i></span>
        <span>facebook-f</span>
    </li>
    <li>
        <span><i class="fa fa-facebook"></i></span>
        <span>facebook</span>
    </li>
    <li>
        <span><i class="fa fa-github"></i></span>
        <span>github</span>
    </li>
    <li>
        <span><i class="fa fa-unlock"></i></span>
        <span>unlock</span>
    </li>
    <li>
        <span><i class="fa fa-credit-card"></i></span>
        <span>credit-card</span>
    </li>
    <li>
        <span><i class="fa fa-feed"></i></span>
        <span>feed</span>
    </li>
    <li>
        <span><i class="fa fa-rss"></i></span>
        <span>rss</span>
    </li>
    <li>
        <span><i class="fa fa-hdd-o"></i></span>
        <span>hdd-o</span>
    </li>
    <li>
        <span><i class="fa fa-bullhorn"></i></span>
        <span>bullhorn</span>
    </li>
    <li>
        <span><i class="fa fa-bell"></i></span>
        <span>bell</span>
    </li>
    <li>
        <span><i class="fa fa-certificate"></i></span>
        <span>certificate</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-right"></i></span>
        <span>hand-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-left"></i></span>
        <span>hand-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-up"></i></span>
        <span>hand-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-down"></i></span>
        <span>hand-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-left"></i></span>
        <span>arrow-circle-left</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-right"></i></span>
        <span>arrow-circle-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-up"></i></span>
        <span>arrow-circle-up</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-down"></i></span>
        <span>arrow-circle-down</span>
    </li>
    <li>
        <span><i class="fa fa-globe"></i></span>
        <span>globe</span>
    </li>
    <li>
        <span><i class="fa fa-wrench"></i></span>
        <span>wrench</span>
    </li>
    <li>
        <span><i class="fa fa-tasks"></i></span>
        <span>tasks</span>
    </li>
    <li>
        <span><i class="fa fa-filter"></i></span>
        <span>filter</span>
    </li>
    <li>
        <span><i class="fa fa-briefcase"></i></span>
        <span>briefcase</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-alt"></i></span>
        <span>arrows-alt</span>
    </li>
    <li>
        <span><i class="fa fa-group"></i></span>
        <span>group</span>
    </li>
    <li>
        <span><i class="fa fa-users"></i></span>
        <span>users</span>
    </li>
    <li>
        <span><i class="fa fa-chain"></i></span>
        <span>chain</span>
    </li>
    <li>
        <span><i class="fa fa-link"></i></span>
        <span>link</span>
    </li>
    <li>
        <span><i class="fa fa-cloud"></i></span>
        <span>cloud</span>
    </li>
    <li>
        <span><i class="fa fa-flask"></i></span>
        <span>flask</span>
    </li>
    <li>
        <span><i class="fa fa-cut"></i></span>
        <span>cut</span>
    </li>
    <li>
        <span><i class="fa fa-scissors"></i></span>
        <span>scissors</span>
    </li>
    <li>
        <span><i class="fa fa-copy"></i></span>
        <span>copy</span>
    </li>
    <li>
        <span><i class="fa fa-files-o"></i></span>
        <span>files-o</span>
    </li>
    <li>
        <span><i class="fa fa-paperclip"></i></span>
        <span>paperclip</span>
    </li>
    <li>
        <span><i class="fa fa-save"></i></span>
        <span>save</span>
    </li>
    <li>
        <span><i class="fa fa-floppy-o"></i></span>
        <span>floppy-o</span>
    </li>
    <li>
        <span><i class="fa fa-square"></i></span>
        <span>square</span>
    </li>
    <li>
        <span><i class="fa fa-navicon"></i></span>
        <span>navicon</span>
    </li>
    <li>
        <span><i class="fa fa-reorder"></i></span>
        <span>reorder</span>
    </li>
    <li>
        <span><i class="fa fa-bars"></i></span>
        <span>bars</span>
    </li>
    <li>
        <span><i class="fa fa-list-ul"></i></span>
        <span>list-ul</span>
    </li>
    <li>
        <span><i class="fa fa-list-ol"></i></span>
        <span>list-ol</span>
    </li>
    <li>
        <span><i class="fa fa-strikethrough"></i></span>
        <span>strikethrough</span>
    </li>
    <li>
        <span><i class="fa fa-underline"></i></span>
        <span>underline</span>
    </li>
    <li>
        <span><i class="fa fa-table"></i></span>
        <span>table</span>
    </li>
    <li>
        <span><i class="fa fa-magic"></i></span>
        <span>magic</span>
    </li>
    <li>
        <span><i class="fa fa-truck"></i></span>
        <span>truck</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest"></i></span>
        <span>pinterest</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest-square"></i></span>
        <span>pinterest-square</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-square"></i></span>
        <span>google-plus-square</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus"></i></span>
        <span>google-plus</span>
    </li>
    <li>
        <span><i class="fa fa-money"></i></span>
        <span>money</span>
    </li>
    <li>
        <span><i class="fa fa-caret-down"></i></span>
        <span>caret-down</span>
    </li>
    <li>
        <span><i class="fa fa-caret-up"></i></span>
        <span>caret-up</span>
    </li>
    <li>
        <span><i class="fa fa-caret-left"></i></span>
        <span>caret-left</span>
    </li>
    <li>
        <span><i class="fa fa-caret-right"></i></span>
        <span>caret-right</span>
    </li>
    <li>
        <span><i class="fa fa-columns"></i></span>
        <span>columns</span>
    </li>
    <li>
        <span><i class="fa fa-unsorted"></i></span>
        <span>unsorted</span>
    </li>
    <li>
        <span><i class="fa fa-sort"></i></span>
        <span>sort</span>
    </li>
    <li>
        <span><i class="fa fa-sort-down"></i></span>
        <span>sort-down</span>
    </li>
    <li>
        <span><i class="fa fa-sort-desc"></i></span>
        <span>sort-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-up"></i></span>
        <span>sort-up</span>
    </li>
    <li>
        <span><i class="fa fa-sort-asc"></i></span>
        <span>sort-asc</span>
    </li>
    <li>
        <span><i class="fa fa-envelope"></i></span>
        <span>envelope</span>
    </li>
    <li>
        <span><i class="fa fa-linkedin"></i></span>
        <span>linkedin</span>
    </li>
    <li>
        <span><i class="fa fa-rotate-left"></i></span>
        <span>rotate-left</span>
    </li>
    <li>
        <span><i class="fa fa-undo"></i></span>
        <span>undo</span>
    </li>
    <li>
        <span><i class="fa fa-legal"></i></span>
        <span>legal</span>
    </li>
    <li>
        <span><i class="fa fa-gavel"></i></span>
        <span>gavel</span>
    </li>
    <li>
        <span><i class="fa fa-dashboard"></i></span>
        <span>dashboard</span>
    </li>
    <li>
        <span><i class="fa fa-tachometer"></i></span>
        <span>tachometer</span>
    </li>
    <li>
        <span><i class="fa fa-comment-o"></i></span>
        <span>comment-o</span>
    </li>
    <li>
        <span><i class="fa fa-comments-o"></i></span>
        <span>comments-o</span>
    </li>
    <li>
        <span><i class="fa fa-flash"></i></span>
        <span>flash</span>
    </li>
    <li>
        <span><i class="fa fa-bolt"></i></span>
        <span>bolt</span>
    </li>
    <li>
        <span><i class="fa fa-sitemap"></i></span>
        <span>sitemap</span>
    </li>
    <li>
        <span><i class="fa fa-umbrella"></i></span>
        <span>umbrella</span>
    </li>
    <li>
        <span><i class="fa fa-paste"></i></span>
        <span>paste</span>
    </li>
    <li>
        <span><i class="fa fa-clipboard"></i></span>
        <span>clipboard</span>
    </li>
    <li>
        <span><i class="fa fa-lightbulb-o"></i></span>
        <span>lightbulb-o</span>
    </li>
    <li>
        <span><i class="fa fa-exchange"></i></span>
        <span>exchange</span>
    </li>
    <li>
        <span><i class="fa fa-cloud-download"></i></span>
        <span>cloud-download</span>
    </li>
    <li>
        <span><i class="fa fa-cloud-upload"></i></span>
        <span>cloud-upload</span>
    </li>
    <li>
        <span><i class="fa fa-user-md"></i></span>
        <span>user-md</span>
    </li>
    <li>
        <span><i class="fa fa-stethoscope"></i></span>
        <span>stethoscope</span>
    </li>
    <li>
        <span><i class="fa fa-suitcase"></i></span>
        <span>suitcase</span>
    </li>
    <li>
        <span><i class="fa fa-bell-o"></i></span>
        <span>bell-o</span>
    </li>
    <li>
        <span><i class="fa fa-coffee"></i></span>
        <span>coffee</span>
    </li>
    <li>
        <span><i class="fa fa-cutlery"></i></span>
        <span>cutlery</span>
    </li>
    <li>
        <span><i class="fa fa-file-text-o"></i></span>
        <span>file-text-o</span>
    </li>
    <li>
        <span><i class="fa fa-building-o"></i></span>
        <span>building-o</span>
    </li>
    <li>
        <span><i class="fa fa-hospital-o"></i></span>
        <span>hospital-o</span>
    </li>
    <li>
        <span><i class="fa fa-ambulance"></i></span>
        <span>ambulance</span>
    </li>
    <li>
        <span><i class="fa fa-medkit"></i></span>
        <span>medkit</span>
    </li>
    <li>
        <span><i class="fa fa-fighter-jet"></i></span>
        <span>fighter-jet</span>
    </li>
    <li>
        <span><i class="fa fa-beer"></i></span>
        <span>beer</span>
    </li>
    <li>
        <span><i class="fa fa-h-square"></i></span>
        <span>h-square</span>
    </li>
    <li>
        <span><i class="fa fa-plus-square"></i></span>
        <span>plus-square</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-left"></i></span>
        <span>angle-double-left</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-right"></i></span>
        <span>angle-double-right</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-up"></i></span>
        <span>angle-double-up</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-down"></i></span>
        <span>angle-double-down</span>
    </li>
    <li>
        <span><i class="fa fa-angle-left"></i></span>
        <span>angle-left</span>
    </li>
    <li>
        <span><i class="fa fa-angle-right"></i></span>
        <span>angle-right</span>
    </li>
    <li>
        <span><i class="fa fa-angle-up"></i></span>
        <span>angle-up</span>
    </li>
    <li>
        <span><i class="fa fa-angle-down"></i></span>
        <span>angle-down</span>
    </li>
    <li>
        <span><i class="fa fa-desktop"></i></span>
        <span>desktop</span>
    </li>
    <li>
        <span><i class="fa fa-laptop"></i></span>
        <span>laptop</span>
    </li>
    <li>
        <span><i class="fa fa-tablet"></i></span>
        <span>tablet</span>
    </li>
    <li>
        <span><i class="fa fa-mobile-phone"></i></span>
        <span>mobile-phone</span>
    </li>
    <li>
        <span><i class="fa fa-mobile"></i></span>
        <span>mobile</span>
    </li>
    <li>
        <span><i class="fa fa-circle-o"></i></span>
        <span>circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-quote-left"></i></span>
        <span>quote-left</span>
    </li>
    <li>
        <span><i class="fa fa-quote-right"></i></span>
        <span>quote-right</span>
    </li>
    <li>
        <span><i class="fa fa-spinner"></i></span>
        <span>spinner</span>
    </li>
    <li>
        <span><i class="fa fa-circle"></i></span>
        <span>circle</span>
    </li>
    <li>
        <span><i class="fa fa-mail-reply"></i></span>
        <span>mail-reply</span>
    </li>
    <li>
        <span><i class="fa fa-reply"></i></span>
        <span>reply</span>
    </li>
    <li>
        <span><i class="fa fa-github-alt"></i></span>
        <span>github-alt</span>
    </li>
    <li>
        <span><i class="fa fa-folder-o"></i></span>
        <span>folder-o</span>
    </li>
    <li>
        <span><i class="fa fa-folder-open-o"></i></span>
        <span>folder-open-o</span>
    </li>
    <li>
        <span><i class="fa fa-smile-o"></i></span>
        <span>smile-o</span>
    </li>
    <li>
        <span><i class="fa fa-frown-o"></i></span>
        <span>frown-o</span>
    </li>
    <li>
        <span><i class="fa fa-meh-o"></i></span>
        <span>meh-o</span>
    </li>
    <li>
        <span><i class="fa fa-gamepad"></i></span>
        <span>gamepad</span>
    </li>
    <li>
        <span><i class="fa fa-keyboard-o"></i></span>
        <span>keyboard-o</span>
    </li>
    <li>
        <span><i class="fa fa-flag-o"></i></span>
        <span>flag-o</span>
    </li>
    <li>
        <span><i class="fa fa-flag-checkered"></i></span>
        <span>flag-checkered</span>
    </li>
    <li>
        <span><i class="fa fa-terminal"></i></span>
        <span>terminal</span>
    </li>
    <li>
        <span><i class="fa fa-code"></i></span>
        <span>code</span>
    </li>
    <li>
        <span><i class="fa fa-mail-reply-all"></i></span>
        <span>mail-reply-all</span>
    </li>
    <li>
        <span><i class="fa fa-reply-all"></i></span>
        <span>reply-all</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-empty"></i></span>
        <span>star-half-empty</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-full"></i></span>
        <span>star-half-full</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-o"></i></span>
        <span>star-half-o</span>
    </li>
    <li>
        <span><i class="fa fa-location-arrow"></i></span>
        <span>location-arrow</span>
    </li>
    <li>
        <span><i class="fa fa-crop"></i></span>
        <span>crop</span>
    </li>
    <li>
        <span><i class="fa fa-code-fork"></i></span>
        <span>code-fork</span>
    </li>
    <li>
        <span><i class="fa fa-unlink"></i></span>
        <span>unlink</span>
    </li>
    <li>
        <span><i class="fa fa-chain-broken"></i></span>
        <span>chain-broken</span>
    </li>
    <li>
        <span><i class="fa fa-question"></i></span>
        <span>question</span>
    </li>
    <li>
        <span><i class="fa fa-info"></i></span>
        <span>info</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation"></i></span>
        <span>exclamation</span>
    </li>
    <li>
        <span><i class="fa fa-superscript"></i></span>
        <span>superscript</span>
    </li>
    <li>
        <span><i class="fa fa-subscript"></i></span>
        <span>subscript</span>
    </li>
    <li>
        <span><i class="fa fa-eraser"></i></span>
        <span>eraser</span>
    </li>
    <li>
        <span><i class="fa fa-puzzle-piece"></i></span>
        <span>puzzle-piece</span>
    </li>
    <li>
        <span><i class="fa fa-microphone"></i></span>
        <span>microphone</span>
    </li>
    <li>
        <span><i class="fa fa-microphone-slash"></i></span>
        <span>microphone-slash</span>
    </li>
    <li>
        <span><i class="fa fa-shield"></i></span>
        <span>shield</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-o"></i></span>
        <span>calendar-o</span>
    </li>
    <li>
        <span><i class="fa fa-fire-extinguisher"></i></span>
        <span>fire-extinguisher</span>
    </li>
    <li>
        <span><i class="fa fa-rocket"></i></span>
        <span>rocket</span>
    </li>
    <li>
        <span><i class="fa fa-maxcdn"></i></span>
        <span>maxcdn</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-left"></i></span>
        <span>chevron-circle-left</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-right"></i></span>
        <span>chevron-circle-right</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-up"></i></span>
        <span>chevron-circle-up</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-down"></i></span>
        <span>chevron-circle-down</span>
    </li>
    <li>
        <span><i class="fa fa-html5"></i></span>
        <span>html5</span>
    </li>
    <li>
        <span><i class="fa fa-css3"></i></span>
        <span>css3</span>
    </li>
    <li>
        <span><i class="fa fa-anchor"></i></span>
        <span>anchor</span>
    </li>
    <li>
        <span><i class="fa fa-unlock-alt"></i></span>
        <span>unlock-alt</span>
    </li>
    <li>
        <span><i class="fa fa-bullseye"></i></span>
        <span>bullseye</span>
    </li>
    <li>
        <span><i class="fa fa-ellipsis-h"></i></span>
        <span>ellipsis-h</span>
    </li>
    <li>
        <span><i class="fa fa-ellipsis-v"></i></span>
        <span>ellipsis-v</span>
    </li>
    <li>
        <span><i class="fa fa-rss-square"></i></span>
        <span>rss-square</span>
    </li>
    <li>
        <span><i class="fa fa-play-circle"></i></span>
        <span>play-circle</span>
    </li>
    <li>
        <span><i class="fa fa-ticket"></i></span>
        <span>ticket</span>
    </li>
    <li>
        <span><i class="fa fa-minus-square"></i></span>
        <span>minus-square</span>
    </li>
    <li>
        <span><i class="fa fa-minus-square-o"></i></span>
        <span>minus-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-level-up"></i></span>
        <span>level-up</span>
    </li>
    <li>
        <span><i class="fa fa-level-down"></i></span>
        <span>level-down</span>
    </li>
    <li>
        <span><i class="fa fa-check-square"></i></span>
        <span>check-square</span>
    </li>
    <li>
        <span><i class="fa fa-pencil-square"></i></span>
        <span>pencil-square</span>
    </li>
    <li>
        <span><i class="fa fa-external-link-square"></i></span>
        <span>external-link-square</span>
    </li>
    <li>
        <span><i class="fa fa-share-square"></i></span>
        <span>share-square</span>
    </li>
    <li>
        <span><i class="fa fa-compass"></i></span>
        <span>compass</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-down"></i></span>
        <span>toggle-down</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-down"></i></span>
        <span>caret-square-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-up"></i></span>
        <span>toggle-up</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-up"></i></span>
        <span>caret-square-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-right"></i></span>
        <span>toggle-right</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-right"></i></span>
        <span>caret-square-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-euro"></i></span>
        <span>euro</span>
    </li>
    <li>
        <span><i class="fa fa-eur"></i></span>
        <span>eur</span>
    </li>
    <li>
        <span><i class="fa fa-gbp"></i></span>
        <span>gbp</span>
    </li>
    <li>
        <span><i class="fa fa-dollar"></i></span>
        <span>dollar</span>
    </li>
    <li>
        <span><i class="fa fa-usd"></i></span>
        <span>usd</span>
    </li>
    <li>
        <span><i class="fa fa-rupee"></i></span>
        <span>rupee</span>
    </li>
    <li>
        <span><i class="fa fa-inr"></i></span>
        <span>inr</span>
    </li>
    <li>
        <span><i class="fa fa-cny"></i></span>
        <span>cny</span>
    </li>
    <li>
        <span><i class="fa fa-rmb"></i></span>
        <span>rmb</span>
    </li>
    <li>
        <span><i class="fa fa-yen"></i></span>
        <span>yen</span>
    </li>
    <li>
        <span><i class="fa fa-jpy"></i></span>
        <span>jpy</span>
    </li>
    <li>
        <span><i class="fa fa-ruble"></i></span>
        <span>ruble</span>
    </li>
    <li>
        <span><i class="fa fa-rouble"></i></span>
        <span>rouble</span>
    </li>
    <li>
        <span><i class="fa fa-rub"></i></span>
        <span>rub</span>
    </li>
    <li>
        <span><i class="fa fa-won"></i></span>
        <span>won</span>
    </li>
    <li>
        <span><i class="fa fa-krw"></i></span>
        <span>krw</span>
    </li>
    <li>
        <span><i class="fa fa-bitcoin"></i></span>
        <span>bitcoin</span>
    </li>
    <li>
        <span><i class="fa fa-btc"></i></span>
        <span>btc</span>
    </li>
    <li>
        <span><i class="fa fa-file"></i></span>
        <span>file</span>
    </li>
    <li>
        <span><i class="fa fa-file-text"></i></span>
        <span>file-text</span>
    </li>
    <li>
        <span><i class="fa fa-sort-alpha-asc"></i></span>
        <span>sort-alpha-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-alpha-desc"></i></span>
        <span>sort-alpha-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-amount-asc"></i></span>
        <span>sort-amount-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-amount-desc"></i></span>
        <span>sort-amount-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-numeric-asc"></i></span>
        <span>sort-numeric-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-numeric-desc"></i></span>
        <span>sort-numeric-desc</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-up"></i></span>
        <span>thumbs-up</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-down"></i></span>
        <span>thumbs-down</span>
    </li>
    <li>
        <span><i class="fa fa-youtube-square"></i></span>
        <span>youtube-square</span>
    </li>
    <li>
        <span><i class="fa fa-youtube"></i></span>
        <span>youtube</span>
    </li>
    <li>
        <span><i class="fa fa-xing"></i></span>
        <span>xing</span>
    </li>
    <li>
        <span><i class="fa fa-xing-square"></i></span>
        <span>xing-square</span>
    </li>
    <li>
        <span><i class="fa fa-youtube-play"></i></span>
        <span>youtube-play</span>
    </li>
    <li>
        <span><i class="fa fa-dropbox"></i></span>
        <span>dropbox</span>
    </li>
    <li>
        <span><i class="fa fa-stack-overflow"></i></span>
        <span>stack-overflow</span>
    </li>
    <li>
        <span><i class="fa fa-instagram"></i></span>
        <span>instagram</span>
    </li>
    <li>
        <span><i class="fa fa-flickr"></i></span>
        <span>flickr</span>
    </li>
    <li>
        <span><i class="fa fa-adn"></i></span>
        <span>adn</span>
    </li>
    <li>
        <span><i class="fa fa-bitbucket"></i></span>
        <span>bitbucket</span>
    </li>
    <li>
        <span><i class="fa fa-bitbucket-square"></i></span>
        <span>bitbucket-square</span>
    </li>
    <li>
        <span><i class="fa fa-tumblr"></i></span>
        <span>tumblr</span>
    </li>
    <li>
        <span><i class="fa fa-tumblr-square"></i></span>
        <span>tumblr-square</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-down"></i></span>
        <span>long-arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-up"></i></span>
        <span>long-arrow-up</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-left"></i></span>
        <span>long-arrow-left</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-right"></i></span>
        <span>long-arrow-right</span>
    </li>
    <li>
        <span><i class="fa fa-apple"></i></span>
        <span>apple</span>
    </li>
    <li>
        <span><i class="fa fa-windows"></i></span>
        <span>windows</span>
    </li>
    <li>
        <span><i class="fa fa-android"></i></span>
        <span>android</span>
    </li>
    <li>
        <span><i class="fa fa-linux"></i></span>
        <span>linux</span>
    </li>
    <li>
        <span><i class="fa fa-dribbble"></i></span>
        <span>dribbble</span>
    </li>
    <li>
        <span><i class="fa fa-skype"></i></span>
        <span>skype</span>
    </li>
    <li>
        <span><i class="fa fa-foursquare"></i></span>
        <span>foursquare</span>
    </li>
    <li>
        <span><i class="fa fa-trello"></i></span>
        <span>trello</span>
    </li>
    <li>
        <span><i class="fa fa-female"></i></span>
        <span>female</span>
    </li>
    <li>
        <span><i class="fa fa-male"></i></span>
        <span>male</span>
    </li>
    <li>
        <span><i class="fa fa-gittip"></i></span>
        <span>gittip</span>
    </li>
    <li>
        <span><i class="fa fa-gratipay"></i></span>
        <span>gratipay</span>
    </li>
    <li>
        <span><i class="fa fa-sun-o"></i></span>
        <span>sun-o</span>
    </li>
    <li>
        <span><i class="fa fa-moon-o"></i></span>
        <span>moon-o</span>
    </li>
    <li>
        <span><i class="fa fa-archive"></i></span>
        <span>archive</span>
    </li>
    <li>
        <span><i class="fa fa-bug"></i></span>
        <span>bug</span>
    </li>
    <li>
        <span><i class="fa fa-vk"></i></span>
        <span>vk</span>
    </li>
    <li>
        <span><i class="fa fa-weibo"></i></span>
        <span>weibo</span>
    </li>
    <li>
        <span><i class="fa fa-renren"></i></span>
        <span>renren</span>
    </li>
    <li>
        <span><i class="fa fa-pagelines"></i></span>
        <span>pagelines</span>
    </li>
    <li>
        <span><i class="fa fa-stack-exchange"></i></span>
        <span>stack-exchange</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-right"></i></span>
        <span>arrow-circle-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-left"></i></span>
        <span>arrow-circle-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-left"></i></span>
        <span>toggle-left</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-left"></i></span>
        <span>caret-square-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-dot-circle-o"></i></span>
        <span>dot-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-wheelchair"></i></span>
        <span>wheelchair</span>
    </li>
    <li>
        <span><i class="fa fa-vimeo-square"></i></span>
        <span>vimeo-square</span>
    </li>
    <li>
        <span><i class="fa fa-turkish-lira"></i></span>
        <span>turkish-lira</span>
    </li>
    <li>
        <span><i class="fa fa-try"></i></span>
        <span>try</span>
    </li>
    <li>
        <span><i class="fa fa-plus-square-o"></i></span>
        <span>plus-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-space-shuttle"></i></span>
        <span>space-shuttle</span>
    </li>
    <li>
        <span><i class="fa fa-slack"></i></span>
        <span>slack</span>
    </li>
    <li>
        <span><i class="fa fa-envelope-square"></i></span>
        <span>envelope-square</span>
    </li>
    <li>
        <span><i class="fa fa-wordpress"></i></span>
        <span>wordpress</span>
    </li>
    <li>
        <span><i class="fa fa-openid"></i></span>
        <span>openid</span>
    </li>
    <li>
        <span><i class="fa fa-institution"></i></span>
        <span>institution</span>
    </li>
    <li>
        <span><i class="fa fa-bank"></i></span>
        <span>bank</span>
    </li>
    <li>
        <span><i class="fa fa-university"></i></span>
        <span>university</span>
    </li>
    <li>
        <span><i class="fa fa-mortar-board"></i></span>
        <span>mortar-board</span>
    </li>
    <li>
        <span><i class="fa fa-graduation-cap"></i></span>
        <span>graduation-cap</span>
    </li>
    <li>
        <span><i class="fa fa-yahoo"></i></span>
        <span>yahoo</span>
    </li>
    <li>
        <span><i class="fa fa-google"></i></span>
        <span>google</span>
    </li>
    <li>
        <span><i class="fa fa-reddit"></i></span>
        <span>reddit</span>
    </li>
    <li>
        <span><i class="fa fa-reddit-square"></i></span>
        <span>reddit-square</span>
    </li>
    <li>
        <span><i class="fa fa-stumbleupon-circle"></i></span>
        <span>stumbleupon-circle</span>
    </li>
    <li>
        <span><i class="fa fa-stumbleupon"></i></span>
        <span>stumbleupon</span>
    </li>
    <li>
        <span><i class="fa fa-delicious"></i></span>
        <span>delicious</span>
    </li>
    <li>
        <span><i class="fa fa-digg"></i></span>
        <span>digg</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper-pp"></i></span>
        <span>pied-piper-pp</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper-alt"></i></span>
        <span>pied-piper-alt</span>
    </li>
    <li>
        <span><i class="fa fa-drupal"></i></span>
        <span>drupal</span>
    </li>
    <li>
        <span><i class="fa fa-joomla"></i></span>
        <span>joomla</span>
    </li>
    <li>
        <span><i class="fa fa-language"></i></span>
        <span>language</span>
    </li>
    <li>
        <span><i class="fa fa-fax"></i></span>
        <span>fax</span>
    </li>
    <li>
        <span><i class="fa fa-building"></i></span>
        <span>building</span>
    </li>
    <li>
        <span><i class="fa fa-child"></i></span>
        <span>child</span>
    </li>
    <li>
        <span><i class="fa fa-paw"></i></span>
        <span>paw</span>
    </li>
    <li>
        <span><i class="fa fa-spoon"></i></span>
        <span>spoon</span>
    </li>
    <li>
        <span><i class="fa fa-cube"></i></span>
        <span>cube</span>
    </li>
    <li>
        <span><i class="fa fa-cubes"></i></span>
        <span>cubes</span>
    </li>
    <li>
        <span><i class="fa fa-behance"></i></span>
        <span>behance</span>
    </li>
    <li>
        <span><i class="fa fa-behance-square"></i></span>
        <span>behance-square</span>
    </li>
    <li>
        <span><i class="fa fa-steam"></i></span>
        <span>steam</span>
    </li>
    <li>
        <span><i class="fa fa-steam-square"></i></span>
        <span>steam-square</span>
    </li>
    <li>
        <span><i class="fa fa-recycle"></i></span>
        <span>recycle</span>
    </li>
    <li>
        <span><i class="fa fa-automobile"></i></span>
        <span>automobile</span>
    </li>
    <li>
        <span><i class="fa fa-car"></i></span>
        <span>car</span>
    </li>
    <li>
        <span><i class="fa fa-cab"></i></span>
        <span>cab</span>
    </li>
    <li>
        <span><i class="fa fa-taxi"></i></span>
        <span>taxi</span>
    </li>
    <li>
        <span><i class="fa fa-tree"></i></span>
        <span>tree</span>
    </li>
    <li>
        <span><i class="fa fa-spotify"></i></span>
        <span>spotify</span>
    </li>
    <li>
        <span><i class="fa fa-deviantart"></i></span>
        <span>deviantart</span>
    </li>
    <li>
        <span><i class="fa fa-soundcloud"></i></span>
        <span>soundcloud</span>
    </li>
    <li>
        <span><i class="fa fa-database"></i></span>
        <span>database</span>
    </li>
    <li>
        <span><i class="fa fa-file-pdf-o"></i></span>
        <span>file-pdf-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-word-o"></i></span>
        <span>file-word-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-excel-o"></i></span>
        <span>file-excel-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-powerpoint-o"></i></span>
        <span>file-powerpoint-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-photo-o"></i></span>
        <span>file-photo-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-picture-o"></i></span>
        <span>file-picture-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-image-o"></i></span>
        <span>file-image-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-zip-o"></i></span>
        <span>file-zip-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-archive-o"></i></span>
        <span>file-archive-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-sound-o"></i></span>
        <span>file-sound-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-audio-o"></i></span>
        <span>file-audio-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-movie-o"></i></span>
        <span>file-movie-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-video-o"></i></span>
        <span>file-video-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-code-o"></i></span>
        <span>file-code-o</span>
    </li>
    <li>
        <span><i class="fa fa-vine"></i></span>
        <span>vine</span>
    </li>
    <li>
        <span><i class="fa fa-codepen"></i></span>
        <span>codepen</span>
    </li>
    <li>
        <span><i class="fa fa-jsfiddle"></i></span>
        <span>jsfiddle</span>
    </li>
    <li>
        <span><i class="fa fa-life-bouy"></i></span>
        <span>life-bouy</span>
    </li>
    <li>
        <span><i class="fa fa-life-buoy"></i></span>
        <span>life-buoy</span>
    </li>
    <li>
        <span><i class="fa fa-life-saver"></i></span>
        <span>life-saver</span>
    </li>
    <li>
        <span><i class="fa fa-support"></i></span>
        <span>support</span>
    </li>
    <li>
        <span><i class="fa fa-life-ring"></i></span>
        <span>life-ring</span>
    </li>
    <li>
        <span><i class="fa fa-circle-o-notch"></i></span>
        <span>circle-o-notch</span>
    </li>
    <li>
        <span><i class="fa fa-ra"></i></span>
        <span>ra</span>
    </li>
    <li>
        <span><i class="fa fa-resistance"></i></span>
        <span>resistance</span>
    </li>
    <li>
        <span><i class="fa fa-rebel"></i></span>
        <span>rebel</span>
    </li>
    <li>
        <span><i class="fa fa-ge"></i></span>
        <span>ge</span>
    </li>
    <li>
        <span><i class="fa fa-empire"></i></span>
        <span>empire</span>
    </li>
    <li>
        <span><i class="fa fa-git-square"></i></span>
        <span>git-square</span>
    </li>
    <li>
        <span><i class="fa fa-git"></i></span>
        <span>git</span>
    </li>
    <li>
        <span><i class="fa fa-y-combinator-square"></i></span>
        <span>y-combinator-square</span>
    </li>
    <li>
        <span><i class="fa fa-yc-square"></i></span>
        <span>yc-square</span>
    </li>
    <li>
        <span><i class="fa fa-hacker-news"></i></span>
        <span>hacker-news</span>
    </li>
    <li>
        <span><i class="fa fa-tencent-weibo"></i></span>
        <span>tencent-weibo</span>
    </li>
    <li>
        <span><i class="fa fa-qq"></i></span>
        <span>qq</span>
    </li>
    <li>
        <span><i class="fa fa-wechat"></i></span>
        <span>wechat</span>
    </li>
    <li>
        <span><i class="fa fa-weixin"></i></span>
        <span>weixin</span>
    </li>
    <li>
        <span><i class="fa fa-send"></i></span>
        <span>send</span>
    </li>
    <li>
        <span><i class="fa fa-paper-plane"></i></span>
        <span>paper-plane</span>
    </li>
    <li>
        <span><i class="fa fa-send-o"></i></span>
        <span>send-o</span>
    </li>
    <li>
        <span><i class="fa fa-paper-plane-o"></i></span>
        <span>paper-plane-o</span>
    </li>
    <li>
        <span><i class="fa fa-history"></i></span>
        <span>history</span>
    </li>
    <li>
        <span><i class="fa fa-circle-thin"></i></span>
        <span>circle-thin</span>
    </li>
    <li>
        <span><i class="fa fa-header"></i></span>
        <span>header</span>
    </li>
    <li>
        <span><i class="fa fa-paragraph"></i></span>
        <span>paragraph</span>
    </li>
    <li>
        <span><i class="fa fa-sliders"></i></span>
        <span>sliders</span>
    </li>
    <li>
        <span><i class="fa fa-share-alt"></i></span>
        <span>share-alt</span>
    </li>
    <li>
        <span><i class="fa fa-share-alt-square"></i></span>
        <span>share-alt-square</span>
    </li>
    <li>
        <span><i class="fa fa-bomb"></i></span>
        <span>bomb</span>
    </li>
    <li>
        <span><i class="fa fa-soccer-ball-o"></i></span>
        <span>soccer-ball-o</span>
    </li>
    <li>
        <span><i class="fa fa-futbol-o"></i></span>
        <span>futbol-o</span>
    </li>
    <li>
        <span><i class="fa fa-tty"></i></span>
        <span>tty</span>
    </li>
    <li>
        <span><i class="fa fa-binoculars"></i></span>
        <span>binoculars</span>
    </li>
    <li>
        <span><i class="fa fa-plug"></i></span>
        <span>plug</span>
    </li>
    <li>
        <span><i class="fa fa-slideshare"></i></span>
        <span>slideshare</span>
    </li>
    <li>
        <span><i class="fa fa-twitch"></i></span>
        <span>twitch</span>
    </li>
    <li>
        <span><i class="fa fa-yelp"></i></span>
        <span>yelp</span>
    </li>
    <li>
        <span><i class="fa fa-newspaper-o"></i></span>
        <span>newspaper-o</span>
    </li>
    <li>
        <span><i class="fa fa-wifi"></i></span>
        <span>wifi</span>
    </li>
    <li>
        <span><i class="fa fa-calculator"></i></span>
        <span>calculator</span>
    </li>
    <li>
        <span><i class="fa fa-paypal"></i></span>
        <span>paypal</span>
    </li>
    <li>
        <span><i class="fa fa-google-wallet"></i></span>
        <span>google-wallet</span>
    </li>
    <li>
        <span><i class="fa fa-cc-visa"></i></span>
        <span>cc-visa</span>
    </li>
    <li>
        <span><i class="fa fa-cc-mastercard"></i></span>
        <span>cc-mastercard</span>
    </li>
    <li>
        <span><i class="fa fa-cc-discover"></i></span>
        <span>cc-discover</span>
    </li>
    <li>
        <span><i class="fa fa-cc-amex"></i></span>
        <span>cc-amex</span>
    </li>
    <li>
        <span><i class="fa fa-cc-paypal"></i></span>
        <span>cc-paypal</span>
    </li>
    <li>
        <span><i class="fa fa-cc-stripe"></i></span>
        <span>cc-stripe</span>
    </li>
    <li>
        <span><i class="fa fa-bell-slash"></i></span>
        <span>bell-slash</span>
    </li>
    <li>
        <span><i class="fa fa-bell-slash-o"></i></span>
        <span>bell-slash-o</span>
    </li>
    <li>
        <span><i class="fa fa-trash"></i></span>
        <span>trash</span>
    </li>
    <li>
        <span><i class="fa fa-copyright"></i></span>
        <span>copyright</span>
    </li>
    <li>
        <span><i class="fa fa-at"></i></span>
        <span>at</span>
    </li>
    <li>
        <span><i class="fa fa-eyedropper"></i></span>
        <span>eyedropper</span>
    </li>
    <li>
        <span><i class="fa fa-paint-brush"></i></span>
        <span>paint-brush</span>
    </li>
    <li>
        <span><i class="fa fa-birthday-cake"></i></span>
        <span>birthday-cake</span>
    </li>
    <li>
        <span><i class="fa fa-area-chart"></i></span>
        <span>area-chart</span>
    </li>
    <li>
        <span><i class="fa fa-pie-chart"></i></span>
        <span>pie-chart</span>
    </li>
    <li>
        <span><i class="fa fa-line-chart"></i></span>
        <span>line-chart</span>
    </li>
    <li>
        <span><i class="fa fa-lastfm"></i></span>
        <span>lastfm</span>
    </li>
    <li>
        <span><i class="fa fa-lastfm-square"></i></span>
        <span>lastfm-square</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-off"></i></span>
        <span>toggle-off</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-on"></i></span>
        <span>toggle-on</span>
    </li>
    <li>
        <span><i class="fa fa-bicycle"></i></span>
        <span>bicycle</span>
    </li>
    <li>
        <span><i class="fa fa-bus"></i></span>
        <span>bus</span>
    </li>
    <li>
        <span><i class="fa fa-ioxhost"></i></span>
        <span>ioxhost</span>
    </li>
    <li>
        <span><i class="fa fa-angellist"></i></span>
        <span>angellist</span>
    </li>
    <li>
        <span><i class="fa fa-cc"></i></span>
        <span>cc</span>
    </li>
    <li>
        <span><i class="fa fa-shekel"></i></span>
        <span>shekel</span>
    </li>
    <li>
        <span><i class="fa fa-sheqel"></i></span>
        <span>sheqel</span>
    </li>
    <li>
        <span><i class="fa fa-ils"></i></span>
        <span>ils</span>
    </li>
    <li>
        <span><i class="fa fa-meanpath"></i></span>
        <span>meanpath</span>
    </li>
    <li>
        <span><i class="fa fa-buysellads"></i></span>
        <span>buysellads</span>
    </li>
    <li>
        <span><i class="fa fa-connectdevelop"></i></span>
        <span>connectdevelop</span>
    </li>
    <li>
        <span><i class="fa fa-dashcube"></i></span>
        <span>dashcube</span>
    </li>
    <li>
        <span><i class="fa fa-forumbee"></i></span>
        <span>forumbee</span>
    </li>
    <li>
        <span><i class="fa fa-leanpub"></i></span>
        <span>leanpub</span>
    </li>
    <li>
        <span><i class="fa fa-sellsy"></i></span>
        <span>sellsy</span>
    </li>
    <li>
        <span><i class="fa fa-shirtsinbulk"></i></span>
        <span>shirtsinbulk</span>
    </li>
    <li>
        <span><i class="fa fa-simplybuilt"></i></span>
        <span>simplybuilt</span>
    </li>
    <li>
        <span><i class="fa fa-skyatlas"></i></span>
        <span>skyatlas</span>
    </li>
    <li>
        <span><i class="fa fa-cart-plus"></i></span>
        <span>cart-plus</span>
    </li>
    <li>
        <span><i class="fa fa-cart-arrow-down"></i></span>
        <span>cart-arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-diamond"></i></span>
        <span>diamond</span>
    </li>
    <li>
        <span><i class="fa fa-ship"></i></span>
        <span>ship</span>
    </li>
    <li>
        <span><i class="fa fa-user-secret"></i></span>
        <span>user-secret</span>
    </li>
    <li>
        <span><i class="fa fa-motorcycle"></i></span>
        <span>motorcycle</span>
    </li>
    <li>
        <span><i class="fa fa-street-view"></i></span>
        <span>street-view</span>
    </li>
    <li>
        <span><i class="fa fa-heartbeat"></i></span>
        <span>heartbeat</span>
    </li>
    <li>
        <span><i class="fa fa-venus"></i></span>
        <span>venus</span>
    </li>
    <li>
        <span><i class="fa fa-mars"></i></span>
        <span>mars</span>
    </li>
    <li>
        <span><i class="fa fa-mercury"></i></span>
        <span>mercury</span>
    </li>
    <li>
        <span><i class="fa fa-intersex"></i></span>
        <span>intersex</span>
    </li>
    <li>
        <span><i class="fa fa-transgender"></i></span>
        <span>transgender</span>
    </li>
    <li>
        <span><i class="fa fa-transgender-alt"></i></span>
        <span>transgender-alt</span>
    </li>
    <li>
        <span><i class="fa fa-venus-double"></i></span>
        <span>venus-double</span>
    </li>
    <li>
        <span><i class="fa fa-mars-double"></i></span>
        <span>mars-double</span>
    </li>
    <li>
        <span><i class="fa fa-venus-mars"></i></span>
        <span>venus-mars</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke"></i></span>
        <span>mars-stroke</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke-v"></i></span>
        <span>mars-stroke-v</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke-h"></i></span>
        <span>mars-stroke-h</span>
    </li>
    <li>
        <span><i class="fa fa-neuter"></i></span>
        <span>neuter</span>
    </li>
    <li>
        <span><i class="fa fa-genderless"></i></span>
        <span>genderless</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-official"></i></span>
        <span>facebook-official</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest-p"></i></span>
        <span>pinterest-p</span>
    </li>
    <li>
        <span><i class="fa fa-whatsapp"></i></span>
        <span>whatsapp</span>
    </li>
    <li>
        <span><i class="fa fa-server"></i></span>
        <span>server</span>
    </li>
    <li>
        <span><i class="fa fa-user-plus"></i></span>
        <span>user-plus</span>
    </li>
    <li>
        <span><i class="fa fa-user-times"></i></span>
        <span>user-times</span>
    </li>
    <li>
        <span><i class="fa fa-hotel"></i></span>
        <span>hotel</span>
    </li>
    <li>
        <span><i class="fa fa-bed"></i></span>
        <span>bed</span>
    </li>
    <li>
        <span><i class="fa fa-viacoin"></i></span>
        <span>viacoin</span>
    </li>
    <li>
        <span><i class="fa fa-train"></i></span>
        <span>train</span>
    </li>
    <li>
        <span><i class="fa fa-subway"></i></span>
        <span>subway</span>
    </li>
    <li>
        <span><i class="fa fa-medium"></i></span>
        <span>medium</span>
    </li>
    <li>
        <span><i class="fa fa-yc"></i></span>
        <span>yc</span>
    </li>
    <li>
        <span><i class="fa fa-y-combinator"></i></span>
        <span>y-combinator</span>
    </li>
    <li>
        <span><i class="fa fa-optin-monster"></i></span>
        <span>optin-monster</span>
    </li>
    <li>
        <span><i class="fa fa-opencart"></i></span>
        <span>opencart</span>
    </li>
    <li>
        <span><i class="fa fa-expeditedssl"></i></span>
        <span>expeditedssl</span>
    </li>
    <li>
        <span><i class="fa fa-battery-4"></i></span>
        <span>battery-4</span>
    </li>
    <li>
        <span><i class="fa fa-battery-full"></i></span>
        <span>battery-full</span>
    </li>
    <li>
        <span><i class="fa fa-battery-3"></i></span>
        <span>battery-3</span>
    </li>
    <li>
        <span><i class="fa fa-battery-three-quarters"></i></span>
        <span>battery-three-quarters</span>
    </li>
    <li>
        <span><i class="fa fa-battery-2"></i></span>
        <span>battery-2</span>
    </li>
    <li>
        <span><i class="fa fa-battery-half"></i></span>
        <span>battery-half</span>
    </li>
    <li>
        <span><i class="fa fa-battery-1"></i></span>
        <span>battery-1</span>
    </li>
    <li>
        <span><i class="fa fa-battery-quarter"></i></span>
        <span>battery-quarter</span>
    </li>
    <li>
        <span><i class="fa fa-battery-0"></i></span>
        <span>battery-0</span>
    </li>
    <li>
        <span><i class="fa fa-battery-empty"></i></span>
        <span>battery-empty</span>
    </li>
    <li>
        <span><i class="fa fa-mouse-pointer"></i></span>
        <span>mouse-pointer</span>
    </li>
    <li>
        <span><i class="fa fa-i-cursor"></i></span>
        <span>i-cursor</span>
    </li>
    <li>
        <span><i class="fa fa-object-group"></i></span>
        <span>object-group</span>
    </li>
    <li>
        <span><i class="fa fa-object-ungroup"></i></span>
        <span>object-ungroup</span>
    </li>
    <li>
        <span><i class="fa fa-sticky-note"></i></span>
        <span>sticky-note</span>
    </li>
    <li>
        <span><i class="fa fa-sticky-note-o"></i></span>
        <span>sticky-note-o</span>
    </li>
    <li>
        <span><i class="fa fa-cc-jcb"></i></span>
        <span>cc-jcb</span>
    </li>
    <li>
        <span><i class="fa fa-cc-diners-club"></i></span>
        <span>cc-diners-club</span>
    </li>
    <li>
        <span><i class="fa fa-clone"></i></span>
        <span>clone</span>
    </li>
    <li>
        <span><i class="fa fa-balance-scale"></i></span>
        <span>balance-scale</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-o"></i></span>
        <span>hourglass-o</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-1"></i></span>
        <span>hourglass-1</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-start"></i></span>
        <span>hourglass-start</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-2"></i></span>
        <span>hourglass-2</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-half"></i></span>
        <span>hourglass-half</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-3"></i></span>
        <span>hourglass-3</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-end"></i></span>
        <span>hourglass-end</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass"></i></span>
        <span>hourglass</span>
    </li>
    <li>
        <span><i class="fa fa-hand-grab-o"></i></span>
        <span>hand-grab-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-rock-o"></i></span>
        <span>hand-rock-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-stop-o"></i></span>
        <span>hand-stop-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-paper-o"></i></span>
        <span>hand-paper-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-scissors-o"></i></span>
        <span>hand-scissors-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-lizard-o"></i></span>
        <span>hand-lizard-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-spock-o"></i></span>
        <span>hand-spock-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-pointer-o"></i></span>
        <span>hand-pointer-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-peace-o"></i></span>
        <span>hand-peace-o</span>
    </li>
    <li>
        <span><i class="fa fa-trademark"></i></span>
        <span>trademark</span>
    </li>
    <li>
        <span><i class="fa fa-registered"></i></span>
        <span>registered</span>
    </li>
    <li>
        <span><i class="fa fa-creative-commons"></i></span>
        <span>creative-commons</span>
    </li>
    <li>
        <span><i class="fa fa-gg"></i></span>
        <span>gg</span>
    </li>
    <li>
        <span><i class="fa fa-gg-circle"></i></span>
        <span>gg-circle</span>
    </li>
    <li>
        <span><i class="fa fa-tripadvisor"></i></span>
        <span>tripadvisor</span>
    </li>
    <li>
        <span><i class="fa fa-odnoklassniki"></i></span>
        <span>odnoklassniki</span>
    </li>
    <li>
        <span><i class="fa fa-odnoklassniki-square"></i></span>
        <span>odnoklassniki-square</span>
    </li>
    <li>
        <span><i class="fa fa-get-pocket"></i></span>
        <span>get-pocket</span>
    </li>
    <li>
        <span><i class="fa fa-wikipedia-w"></i></span>
        <span>wikipedia-w</span>
    </li>
    <li>
        <span><i class="fa fa-safari"></i></span>
        <span>safari</span>
    </li>
    <li>
        <span><i class="fa fa-chrome"></i></span>
        <span>chrome</span>
    </li>
    <li>
        <span><i class="fa fa-firefox"></i></span>
        <span>firefox</span>
    </li>
    <li>
        <span><i class="fa fa-opera"></i></span>
        <span>opera</span>
    </li>
    <li>
        <span><i class="fa fa-internet-explorer"></i></span>
        <span>internet-explorer</span>
    </li>
    <li>
        <span><i class="fa fa-tv"></i></span>
        <span>tv</span>
    </li>
    <li>
        <span><i class="fa fa-television"></i></span>
        <span>television</span>
    </li>
    <li>
        <span><i class="fa fa-contao"></i></span>
        <span>contao</span>
    </li>
    <li>
        <span><i class="fa fa-500px"></i></span>
        <span>500px</span>
    </li>
    <li>
        <span><i class="fa fa-amazon"></i></span>
        <span>amazon</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-plus-o"></i></span>
        <span>calendar-plus-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-minus-o"></i></span>
        <span>calendar-minus-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-times-o"></i></span>
        <span>calendar-times-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-check-o"></i></span>
        <span>calendar-check-o</span>
    </li>
    <li>
        <span><i class="fa fa-industry"></i></span>
        <span>industry</span>
    </li>
    <li>
        <span><i class="fa fa-map-pin"></i></span>
        <span>map-pin</span>
    </li>
    <li>
        <span><i class="fa fa-map-signs"></i></span>
        <span>map-signs</span>
    </li>
    <li>
        <span><i class="fa fa-map-o"></i></span>
        <span>map-o</span>
    </li>
    <li>
        <span><i class="fa fa-map"></i></span>
        <span>map</span>
    </li>
    <li>
        <span><i class="fa fa-commenting"></i></span>
        <span>commenting</span>
    </li>
    <li>
        <span><i class="fa fa-commenting-o"></i></span>
        <span>commenting-o</span>
    </li>
    <li>
        <span><i class="fa fa-houzz"></i></span>
        <span>houzz</span>
    </li>
    <li>
        <span><i class="fa fa-vimeo"></i></span>
        <span>vimeo</span>
    </li>
    <li>
        <span><i class="fa fa-black-tie"></i></span>
        <span>black-tie</span>
    </li>
    <li>
        <span><i class="fa fa-fonticons"></i></span>
        <span>fonticons</span>
    </li>
    <li>
        <span><i class="fa fa-reddit-alien"></i></span>
        <span>reddit-alien</span>
    </li>
    <li>
        <span><i class="fa fa-edge"></i></span>
        <span>edge</span>
    </li>
    <li>
        <span><i class="fa fa-credit-card-alt"></i></span>
        <span>credit-card-alt</span>
    </li>
    <li>
        <span><i class="fa fa-codiepie"></i></span>
        <span>codiepie</span>
    </li>
    <li>
        <span><i class="fa fa-modx"></i></span>
        <span>modx</span>
    </li>
    <li>
        <span><i class="fa fa-fort-awesome"></i></span>
        <span>fort-awesome</span>
    </li>
    <li>
        <span><i class="fa fa-usb"></i></span>
        <span>usb</span>
    </li>
    <li>
        <span><i class="fa fa-product-hunt"></i></span>
        <span>product-hunt</span>
    </li>
    <li>
        <span><i class="fa fa-mixcloud"></i></span>
        <span>mixcloud</span>
    </li>
    <li>
        <span><i class="fa fa-scribd"></i></span>
        <span>scribd</span>
    </li>
    <li>
        <span><i class="fa fa-pause-circle"></i></span>
        <span>pause-circle</span>
    </li>
    <li>
        <span><i class="fa fa-pause-circle-o"></i></span>
        <span>pause-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-stop-circle"></i></span>
        <span>stop-circle</span>
    </li>
    <li>
        <span><i class="fa fa-stop-circle-o"></i></span>
        <span>stop-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-bag"></i></span>
        <span>shopping-bag</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-basket"></i></span>
        <span>shopping-basket</span>
    </li>
    <li>
        <span><i class="fa fa-hashtag"></i></span>
        <span>hashtag</span>
    </li>
    <li>
        <span><i class="fa fa-bluetooth"></i></span>
        <span>bluetooth</span>
    </li>
    <li>
        <span><i class="fa fa-bluetooth-b"></i></span>
        <span>bluetooth-b</span>
    </li>
    <li>
        <span><i class="fa fa-percent"></i></span>
        <span>percent</span>
    </li>
    <li>
        <span><i class="fa fa-gitlab"></i></span>
        <span>gitlab</span>
    </li>
    <li>
        <span><i class="fa fa-wpbeginner"></i></span>
        <span>wpbeginner</span>
    </li>
    <li>
        <span><i class="fa fa-wpforms"></i></span>
        <span>wpforms</span>
    </li>
    <li>
        <span><i class="fa fa-envira"></i></span>
        <span>envira</span>
    </li>
    <li>
        <span><i class="fa fa-universal-access"></i></span>
        <span>universal-access</span>
    </li>
    <li>
        <span><i class="fa fa-wheelchair-alt"></i></span>
        <span>wheelchair-alt</span>
    </li>
    <li>
        <span><i class="fa fa-question-circle-o"></i></span>
        <span>question-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-blind"></i></span>
        <span>blind</span>
    </li>
    <li>
        <span><i class="fa fa-audio-description"></i></span>
        <span>audio-description</span>
    </li>
    <li>
        <span><i class="fa fa-volume-control-phone"></i></span>
        <span>volume-control-phone</span>
    </li>
    <li>
        <span><i class="fa fa-braille"></i></span>
        <span>braille</span>
    </li>
    <li>
        <span><i class="fa fa-assistive-listening-systems"></i></span>
        <span>assistive-listening-systems</span>
    </li>
    <li>
        <span><i class="fa fa-asl-interpreting"></i></span>
        <span>asl-interpreting</span>
    </li>
    <li>
        <span><i class="fa fa-american-sign-language-interpreting"></i></span>
        <span>american-sign-language-interpreting</span>
    </li>
    <li>
        <span><i class="fa fa-deafness"></i></span>
        <span>deafness</span>
    </li>
    <li>
        <span><i class="fa fa-hard-of-hearing"></i></span>
        <span>hard-of-hearing</span>
    </li>
    <li>
        <span><i class="fa fa-deaf"></i></span>
        <span>deaf</span>
    </li>
    <li>
        <span><i class="fa fa-glide"></i></span>
        <span>glide</span>
    </li>
    <li>
        <span><i class="fa fa-glide-g"></i></span>
        <span>glide-g</span>
    </li>
    <li>
        <span><i class="fa fa-signing"></i></span>
        <span>signing</span>
    </li>
    <li>
        <span><i class="fa fa-sign-language"></i></span>
        <span>sign-language</span>
    </li>
    <li>
        <span><i class="fa fa-low-vision"></i></span>
        <span>low-vision</span>
    </li>
    <li>
        <span><i class="fa fa-viadeo"></i></span>
        <span>viadeo</span>
    </li>
    <li>
        <span><i class="fa fa-viadeo-square"></i></span>
        <span>viadeo-square</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat"></i></span>
        <span>snapchat</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat-ghost"></i></span>
        <span>snapchat-ghost</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat-square"></i></span>
        <span>snapchat-square</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper"></i></span>
        <span>pied-piper</span>
    </li>
    <li>
        <span><i class="fa fa-first-order"></i></span>
        <span>first-order</span>
    </li>
    <li>
        <span><i class="fa fa-yoast"></i></span>
        <span>yoast</span>
    </li>
    <li>
        <span><i class="fa fa-themeisle"></i></span>
        <span>themeisle</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-circle"></i></span>
        <span>google-plus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-official"></i></span>
        <span>google-plus-official</span>
    </li>
    <li>
        <span><i class="fa fa-fa"></i></span>
        <span>fa</span>
    </li>
    <li>
        <span><i class="fa fa-font-awesome"></i></span>
        <span>font-awesome</span>
    </li>
</ul>

Components

Media objects

Default

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Nested media heading

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
        odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
        Donec lacinia congue felis in faucibus.
    </div>
</div>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
        odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
        Donec lacinia congue felis in faucibus.
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Nested media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>
    </div>
</div>

List

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Nested media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Nested media heading</h4>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                        </div>
                    </div>
                </div>
            </div>
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Nested media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                </div>
            </div>
        </div>
    </li>
    <li class="media">
        <a class="pull-right" href="#">
            <img class="media-object" src="//www.placehold.it/64x64" alt="media-object">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
            purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
    </li>
</ul>

Navigation

Navbar

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown" dropdown>
                    <a href="#" class="dropdown-toggle" dropdown-toggle>Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown" dropdown>
                    <a href="#" class="dropdown-toggle" dropdown-toggle>Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
</ul>

Justified tabs

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

Pills

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

Stacked pills

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

Dropdown tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li class="dropdown" dropdown>
        <a class="dropdown-toggle" dropdown-toggle href="#">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

Pagination

Default

<ul class="pagination">
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
</ul>

Large

<ul class="pagination pagination-lg">
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
</ul>

Small

<ul class="pagination pagination-sm">
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
</ul>

Breadcrumbs

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

List groups

Simple item
Item with badge 5
Active item
Success
Info
Warning
Danger

A link

Try drying chickpeas paste blended with truffels sauce.

Per guest prepare six peaces of vinegar with pressed ground beef for dessert.

To the divided garlic add bagel, steak, salsa verde and packaged asparagus.

Per guest prepare four tablespoons of red wine with warmed ghee for dessert.

<ul class="list-group">
	<li class="list-group-item">Simple item</li>
    <li class="list-group-item">Item with badge <span class="badge">5</span></li>
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-info">Info</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
    <li class="list-group-item list-group-item-danger">Danger</li>
</ul>
<div class="list-group">
    <a href="#" class="list-group-item">A link</a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Try drying chickpeas paste blended with truffels sauce.</h4>
        <p class="list-group-item-text">Per guest prepare six peaces of vinegar with pressed ground beef for dessert.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">To the divided garlic add bagel, steak, salsa verde and packaged asparagus.</h4>
        <p class="list-group-item-text">Per guest prepare four tablespoons of red wine with warmed ghee for dessert.</p>
    </a>
</div>

Pager

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Progress bars

Basic

60%

Contextual Alternatives

Striped

Animated

Stacked

<h3>Basic</h3>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 60%;">
        60%
    </div>
</div>
<h3>Contextual Alternatives</h3>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
         aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"
         aria-valuemax="100" style="width: 80%">
        <span class="sr-only">80% Complete</span>
    </div>
</div>
<h3>Striped</h3>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
         aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"
         aria-valuemax="100" style="width: 80%">
        <span class="sr-only">80% Complete (danger)</span>
    </div>
</div>
<h3>Animated</h3>
<div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
         style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>
<h3>Stacked</h3>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>

Thumbnails

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="100%x180"
                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="
                 style="height: 180px; width: 100%; display: block;">
        </a>
    </div>
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="100%x180"
                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="
                 style="height: 180px; width: 100%; display: block;">
        </a>
    </div>
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="100%x180"
                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="
                 style="height: 180px; width: 100%; display: block;">
        </a>
    </div>
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="100%x180"
                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="
                 style="height: 180px; width: 100%; display: block;">
        </a>
    </div>
</div>