{% layout 'layout' %}
{% block title %}Buttons{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-buttons.html">Buttons</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
<script>
  $('.loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
      btn.button('reset')
    },3000 )
    
  });
</script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Default Button Variants</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Default Buttons</h3>
                        <p>Basic buttons come in 7 different colors <code>.btn .btn-default</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default">Default</a></li>
                            <li><a href="#" class="btn btn-primary">Primary</a></li>
                            <li><a href="#" class="btn btn-success">Success</a></li>
                            <li><a href="#" class="btn btn-info">Info</a></li>
                            <li><a href="#" class="btn btn-warning">Warning</a></li>
                            <li><a href="#" class="btn btn-danger">Danger</a></li>
                            <li><a href="#" class="btn btn-inverse">Inverse</a></li>
                        </ul>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default"><i class="fa fa-cog"></i></a></li>
                            <li><a href="#" class="btn btn-primary"><i class="fa fa-cloud"></i></a></li>
                            <li><a href="#" class="btn btn-success"><i class="fa fa-check"></i></a></li>
                            <li><a href="#" class="btn btn-info"><i class="fa fa-info-circle"></i></a></li>
                            <li><a href="#" class="btn btn-warning"><i class="fa fa-warning"></i></a></li>
                            <li><a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a></li>
                            <li><a href="#" class="btn btn-inverse"><i class="fa fa-wrench"></i></a></li>
                        </ul>
                        
                        <p>Basic buttons in disabled states <code>.btn .disabled</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn disabled btn-default">Default</a></li>
                            <li><a href="#" class="btn disabled btn-primary">Primary</a></li>
                            <li><a href="#" class="btn disabled btn-success">Success</a></li>
                            <li><a href="#" class="btn disabled btn-info">Info</a></li>
                            <li><a href="#" class="btn disabled btn-warning">Warning</a></li>
                            <li><a href="#" class="btn disabled btn-danger">Danger</a></li>
                            <li><a href="#" class="btn disabled btn-inverse">Inverse</a></li>
                        </ul>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn disabled btn-default"><i class="fa fa-cog"></i></a></li>                             
                            <li><a href="#" class="btn disabled btn-primary"><i class="fa fa-cloud"></i></a></li>
                            <li><a href="#" class="btn disabled btn-success"><i class="fa fa-check"></i></a></li>
                            <li><a href="#" class="btn disabled btn-info"><i class="fa fa-info-circle"></i></a></li>
                            <li><a href="#" class="btn disabled btn-warning"><i class="fa fa-warning"></i></a></li>
                            <li><a href="#" class="btn disabled btn-danger"><i class="fa fa-times"></i></a></li>
                            <li><a href="#" class="btn disabled btn-inverse"><i class="fa fa-wrench"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0">Alternate Buttons</h3>
                        <p>Alternate buttons come in 7 different colors as well <code>.btn .btn-default-alt</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default-alt">Default</a></li>
                            <li><a href="#" class="btn btn-primary-alt">Primary</a></li>
                            <li><a href="#" class="btn btn-success-alt">Success</a></li>
                            <li><a href="#" class="btn btn-info-alt">Info</a></li>
                            <li><a href="#" class="btn btn-warning-alt">Warning</a></li>
                            <li><a href="#" class="btn btn-danger-alt">Danger</a></li>
                            <li><a href="#" class="btn btn-inverse-alt">Inverse</a></li>
                        </ul>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default-alt"><i class="fa fa-cog"></i></a></li>                                
                            <li><a href="#" class="btn btn-primary-alt"><i class="fa fa-cloud"></i></a></li>
                            <li><a href="#" class="btn btn-success-alt"><i class="fa fa-check"></i></a></li>
                            <li><a href="#" class="btn btn-info-alt"><i class="fa fa-info-circle"></i></a></li>
                            <li><a href="#" class="btn btn-warning-alt"><i class="fa fa-warning"></i></a></li>
                            <li><a href="#" class="btn btn-danger-alt"><i class="fa fa-times"></i></a></li>
                            <li><a href="#" class="btn btn-inverse-alt"><i class="fa fa-wrench"></i></a></li>
                        </ul>
                        
                        <p>Alternate buttons in disabled states <code>.btn .disabled</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn disabled btn-default-alt">Default</a></li>
                            <li><a href="#" class="btn disabled btn-primary-alt">Primary</a></li>
                            <li><a href="#" class="btn disabled btn-success-alt">Success</a></li>
                            <li><a href="#" class="btn disabled btn-info-alt">Info</a></li>
                            <li><a href="#" class="btn disabled btn-warning-alt">Warning</a></li>
                            <li><a href="#" class="btn disabled btn-danger-alt">Danger</a></li>
                            <li><a href="#" class="btn disabled btn-inverse-alt">Inverse</a></li>
                        </ul>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn disabled btn-default-alt"><i class="fa fa-cog"></i></a></li>
                            <li><a href="#" class="btn disabled btn-primary-alt"><i class="fa fa-cloud"></i></a></li> 
                            <li><a href="#" class="btn disabled btn-success-alt"><i class="fa fa-check"></i></a></li>
                            <li><a href="#" class="btn disabled btn-info-alt"><i class="fa fa-info-circle"></i></a></li>
                            <li><a href="#" class="btn disabled btn-warning-alt"><i class="fa fa-warning"></i></a></li>
                            <li><a href="#" class="btn disabled btn-danger-alt"><i class="fa fa-times"></i></a></li>
                            <li><a href="#" class="btn disabled btn-inverse-alt"><i class="fa fa-wrench"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Button Sizes</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Default Sizes</h3>
                        <p>Default buttons come in 4 sizes <code>.btn .btn-lg .btn-sm .btn-xs</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default btn-lg">Large Button</a></li>
                            <li><a href="#" class="btn btn-inverse">Normal Button</a></li>
                            <li><a href="#" class="btn btn-midnightblue btn-sm">Small Button</a></li>
                            <li><a href="#" class="btn btn-default btn-xs">Extra Small</a></li>
                        </ul>
                        
                        <p>Different sizes with icon only buttons</p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></a></li>
                            <li><a href="#" class="btn btn-inverse"><i class="fa fa-wrench"></i></a></li>
                            <li><a href="#" class="btn btn-midnightblue btn-sm"><i class="fa fa-cloud"></i></a></li>
                            <li><a href="#" class="btn btn-default btn-xs"><i class="fa fa-times"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0">Default Alternate Sizes</h3>
                        <p>Default alternate buttons come in 4 sizes too</p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default-alt btn-lg">Large Button</a></li>
                            <li><a href="#" class="btn btn-inverse-alt">Normal Button</a></li>
                            <li><a href="#" class="btn btn-midnightblue-alt btn-sm">Small Button</a></li>
                            <li><a href="#" class="btn btn-info-alt btn-xs">Extra Small</a></li>
                        </ul>
                        
                        <p>Different sizes with icon only buttons</p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-default-alt btn-lg"><i class="fa fa-cog fa-spin"></i></a></li>
                            <li><a href="#" class="btn btn-inverse-alt"><i class="fa fa-wrench"></i></a></li>
                            <li><a href="#" class="btn btn-midnightblue-alt btn-sm"><i class="fa fa-cloud"></i></a></li>
                            <li><a href="#" class="btn btn-info-alt btn-xs"><i class="fa fa-times"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Button Blocks</h2>
            </div>
            <div class="panel-body">
                <h3 class="mt0">Default Blocks</h3>
                <p>Block level buttons in default and alternate styles with different sizes <code>.btn-block</code></p>
                <div class="row">
                    <div class="col-md-3">
                        <p>
                            <a href="#" class="btn btn-default btn-lg btn-block">Large Block</a>
                            <a href="#" class="btn btn-primary btn-block">Normal Block</a>
                            <a href="#" class="btn btn-info btn-sm btn-block">Small Block</a>
                            <a href="#" class="btn btn-success btn-xs btn-block">Extra Small Block</a>
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            <a href="#" class="btn btn-inverse btn-lg btn-block"><i class="fa fa-pencil"></i></a>
                            <a href="#" class="btn btn-warning btn-block"><i class="fa fa-wrench"></i></a>
                            <a href="#" class="btn btn-orange btn-sm btn-block"><i class="fa fa-cloud"></i></a>
                            <a href="#" class="btn btn-default btn-xs btn-block"><i class="fa fa-cog"></i></a>
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            <a href="#" class="btn btn-default-alt btn-lg btn-block">Large Block</a>
                            <a href="#" class="btn btn-primary-alt btn-block">Normal Block</a>
                            <a href="#" class="btn btn-info-alt btn-sm btn-block">Small Block</a>
                            <a href="#" class="btn btn-success-alt btn-xs btn-block">Extra Small Block</a>
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            <a href="#" class="btn btn-inverse-alt btn-lg btn-block"><i class="fa fa-pencil"></i></a>
                            <a href="#" class="btn btn-warning-alt btn-block"><i class="fa fa-wrench"></i></a>
                            <a href="#" class="btn btn-orange-alt btn-sm btn-block"><i class="fa fa-cloud"></i></a>
                            <a href="#" class="btn btn-danger-alt btn-xs btn-block"><i class="fa fa-cog"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Button Dropdowns</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Default Dropdowns</h3>
                        <p>Dropdowns default in different colors with <code>.btn .dropdown-toggle</code></p>
                        <ul class="demo-btns">
                            <li>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        Dropdown <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-midnightblue dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-inverse">Dropdown</a>
                                    <a href="#" class="btn btn-inverse dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-primary"><i class="fa fa-cog"></i></a>
                                    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                        </ul>
                        <p>Dropups default in different colors with <code>.dropup</code></p>
                        <ul class="demo-btns">
                            <li>
                                <div class="btn-group dropup">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        Dropdown <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <button type="button" class="btn btn-midnightblue dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <a href="#" class="btn btn-inverse">Dropdown</a>
                                    <a href="#" class="btn btn-inverse dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <a href="#" class="btn btn-primary"><i class="fa fa-cog"></i></a>
                                    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0">Alternate Dropdowns</h3>
                        <p>Alternate dropdowns in different colors with <code>.btn .dropdown-toggle</code></p>
                        <ul class="demo-btns">
                            <li>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default-alt dropdown-toggle" data-toggle="dropdown">
                                        Dropdown <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-midnightblue-alt dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-inverse-alt">Dropdown</a>
                                    <a href="#" class="btn btn-inverse-alt dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-primary-alt"><i class="fa fa-cog"></i></a>
                                    <a href="#" class="btn btn-primary-alt dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                        </ul>
                        <p>Alternate dropups in different colors with  <code>.dropup</code></p>
                        <ul class="demo-btns">
                            <li>
                                <div class="btn-group dropup">
                                    <button type="button" class="btn btn-default-alt dropdown-toggle" data-toggle="dropdown">
                                        Dropdown <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <button type="button" class="btn btn-midnightblue-alt dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <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 class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <a href="#" class="btn btn-inverse-alt">Dropdown</a>
                                    <a href="#" class="btn btn-inverse-alt dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group dropup">
                                    <a href="#" class="btn btn-primary-alt"><i class="fa fa-cog"></i></a>
                                    <a href="#" class="btn btn-primary-alt dropdown-toggle" data-toggle="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>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <h3>Block Level Dropdowns</h3>
                <p>Example block level default and alternate style dropdowns and dropups with <code>.btn-block .dropup</code></p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group btn-block">
                            <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> Settings <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu col-xs-12" 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>
                        </div>
                        <div class="btn-group btn-block dropup">
                            <button type="button" class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> Settings <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu col-xs-12" 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>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="btn-group btn-block">
                            <button type="button" class="btn btn-block btn-default-alt dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> Settings <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu col-xs-12" 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>
                        </div>
                        <div class="btn-group btn-block dropup">
                            <button type="button" class="btn btn-block btn-primary-alt dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> Settings <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu col-xs-12" 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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

   
<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Button Groups</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Grouped Buttons</h3>
                        <p>Grouped buttons variations in default style with <code>.btn-group</code></p>
                        <div class="btn-group mb10">
                            <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 class="btn-group mb10">
                            <button type="button" class="btn btn-success">Success</button>
                            <button type="button" class="btn btn-inverse">Inverse</button>
                            <button type="button" class="btn btn-midnightblue">Midnight</button>
                        </div>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
                            <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
                            <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
                            <button type="button" class="btn btn-default"><i class="fa fa-align-justify"></i></button>
                        </div>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-info"><i class="fa fa-check"></i></button>
                            <button type="button" class="btn btn-warning"><i class="fa fa-cloud"></i></button>
                            <button type="button" class="btn btn-orange"><i class="fa fa-bars"></i></button>
                            <button type="button" class="btn btn-danger"><i class="fa fa-cog"></i></button>
                        </div>
                        <h3>Toolbar</h3>
                        <p>Default toolbar buttons with <code>.btn-toolbar</code></p>
                        <div class="btn-toolbar mb10">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">1</button>
                                <button type="button" class="btn btn-default">2</button>
                                <button type="button" class="btn btn-default">3</button>
                                <button type="button" class="btn btn-default">4</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">5</button>
                                <button type="button" class="btn btn-default">6</button>
                                <button type="button" class="btn btn-default">7</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">8</button>
                            </div>
                        </div>
                        <div class="btn-toolbar mb10">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">1</button>
                                <button type="button" class="btn btn-primary">2</button>
                                <button type="button" class="btn btn-info">3</button>
                                <button type="button" class="btn btn-success">4</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning">5</button>
                                <button type="button" class="btn btn-orange">6</button>
                                <button type="button" class="btn btn-danger">7</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-midnightblue">8</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0">Alternate Grouped Buttons</h3>
                        <p>Grouped buttons variations in alternate style with <code>.btn-group</code></p>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-default-alt">Left</button>
                            <button type="button" class="btn btn-default-alt">Middle</button>
                            <button type="button" class="btn btn-default-alt">Right</button>
                        </div>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-success-alt">Success</button>
                            <button type="button" class="btn btn-inverse-alt">Inverse</button>
                            <button type="button" class="btn btn-midnightblue-alt">Midnight</button>
                        </div>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-default-alt"><i class="fa fa-align-left"></i></button>
                            <button type="button" class="btn btn-default-alt"><i class="fa fa-align-center"></i></button>
                            <button type="button" class="btn btn-default-alt"><i class="fa fa-align-right"></i></button>
                            <button type="button" class="btn btn-default-alt"><i class="fa fa-align-justify"></i></button>
                        </div>
                        <div class="btn-group mb10">
                            <button type="button" class="btn btn-info-alt"><i class="fa fa-check"></i></button>
                            <button type="button" class="btn btn-warning-alt"><i class="fa fa-cloud"></i></button>
                            <button type="button" class="btn btn-orange-alt"><i class="fa fa-bars"></i></button>
                            <button type="button" class="btn btn-danger-alt"><i class="fa fa-cog"></i></button>
                        </div>
                        <h3>Alternate Toolbar</h3>
                        <p>Alternate toolbar buttons with <code>.btn-toolbar</code></p>
                        <div class="btn-toolbar mb10">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default-alt">1</button>
                                <button type="button" class="btn btn-default-alt">2</button>
                                <button type="button" class="btn btn-default-alt">3</button>
                                <button type="button" class="btn btn-default-alt">4</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default-alt">5</button>
                                <button type="button" class="btn btn-default-alt">6</button>
                                <button type="button" class="btn btn-default-alt">7</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default-alt">8</button>
                            </div>
                        </div>
                        <div class="btn-toolbar mb10">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default-alt">1</button>
                                <button type="button" class="btn btn-primary-alt">2</button>
                                <button type="button" class="btn btn-info-alt">3</button>
                                <button type="button" class="btn btn-success-alt">4</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning-alt">5</button>
                                <button type="button" class="btn btn-danger-alt">6</button>
                                <button type="button" class="btn btn-inverse-alt">7</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-midnightblue-alt">8</button>
                            </div>
                        </div>
                    </div>
                </div>
                <h3>Vertical Button Groups</h3>
                <p>Vertically grouped buttons in default and alternate styles and color variations using the class <code>.btn-group-vertical</code></p>
                <div class="row">
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <button type="button" class="btn btn-default">Top</button>
                            <button type="button" class="btn btn-default">Middle</button>
                            <button type="button" class="btn btn-default">Bottom</button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
                            <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
                            <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
                            <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <a class="btn btn-success" href="#"><i class="fa fa-check"></i></a>
                            <a class="btn btn-primary" href="#"><i class="fa fa-cloud"></i></a>
                            <a class="btn btn-inverse" href="#"><i class="fa fa-cog"></i></a>
                            <a class="btn btn-midnightblue" href="#"><i class="fa fa-bars"></i></a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <button type="button" class="btn btn-default-alt">Top</button>
                            <button type="button" class="btn btn-default-alt">Middle</button>
                            <button type="button" class="btn btn-default-alt">Bottom</button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <a class="btn btn-default-alt" href="#"><i class="fa fa-align-left"></i></a>
                            <a class="btn btn-default-alt" href="#"><i class="fa fa-align-center"></i></a>
                            <a class="btn btn-default-alt" href="#"><i class="fa fa-align-right"></i></a>
                            <a class="btn btn-default-alt" href="#"><i class="fa fa-align-justify"></i></a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group-vertical mb10">
                            <a class="btn btn-success-alt" href="#"><i class="fa fa-check"></i></a>
                            <a class="btn btn-primary-alt" href="#"><i class="fa fa-cloud"></i></a>
                            <a class="btn btn-inverse-alt" href="#"><i class="fa fa-cog"></i></a>
                            <a class="btn btn-midnightblue-alt" href="#"><i class="fa fa-bars"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Label Buttons</h2>
            </div>
            <div class="panel-body">           
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Label Buttons</h3>
                        <p>Adding a <code>.btn-label</code> class to the button will increase focus on the attached icon</p>            
                        <ul class="demo-btns">
                            <li><a class="btn btn-lg btn-inverse btn-label" href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a class="btn btn-lg btn-inverse btn-label" href="#"><i class="fa fa-download"></i> Download</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-success btn-label" href="#"><i class="fa fa-check"></i> Checked</a></li>
                            <li><a class="btn btn-success btn-label" href="#"><i class="fa fa-clock-o"></i> Activity</a></li>
                            <li><a class="btn btn-success btn-label" href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-sm btn-warning btn-label" href="#"><i class="fa fa-bookmark"></i> Bookmark</a></li>
                            <li><a class="btn btn-sm btn-warning btn-label" href="#"><i class="fa fa-cloud"></i> Cloud</a></li>
                            <li><a class="btn btn-sm btn-warning btn-label" href="#"><i class="fa fa-flag"></i> Flag</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-xs btn-danger btn-label" href="#"><i class="fa fa-times"></i> Cancel</a></li>
                            <li><a class="btn btn-xs btn-danger btn-label" href="#"><i class="fa fa-minus-circle"></i> Delete</a></li>
                            <li><a class="btn btn-xs btn-danger btn-label" href="#"><i class="fa fa-trash-o"></i> Remove</a></li>
                            
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0">Alternate Label Buttons</h3>
                        <p>Adding a <code>.btn-label</code> class to the button will increase focus on the attached icon</p>   
                        <ul class="demo-btns">
                            <li><a class="btn btn-lg btn-primary-alt btn-label" href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a class="btn btn-lg btn-primary-alt btn-label" href="#"><i class="fa fa-download"></i> Download</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-success-alt btn-label" href="#"><i class="fa fa-check"></i> Checked</a></li>
                            <li><a class="btn btn-success-alt btn-label" href="#"><i class="fa fa-clock-o"></i> Activity</a></li>
                            <li><a class="btn btn-success-alt btn-label" href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-sm btn-warning-alt btn-label" href="#"><i class="fa fa-bookmark"></i> Bookmark</a></li>
                            <li><a class="btn btn-sm btn-warning-alt btn-label" href="#"><i class="fa fa-cloud"></i> Cloud</a></li>
                            <li><a class="btn btn-sm btn-warning-alt btn-label" href="#"><i class="fa fa-flag"></i> Flag</a></li>
                            
                        </ul>
                        <ul class="demo-btns">
                            <li><a class="btn btn-xs btn-danger-alt btn-label" href="#"><i class="fa fa-times"></i> Cancel</a></li>
                            <li><a class="btn btn-xs btn-danger-alt btn-label" href="#"><i class="fa fa-minus-circle"></i> Delete</a></li>
                            <li><a class="btn btn-xs btn-danger-alt btn-label" href="#"><i class="fa fa-trash-o"></i> Remove</a></li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Button States</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="mt0">Loading State</h3>
                        <p>Button loading state default style <code>.loading-example-btn</code></p>
                        <ul class="demo-btns">
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-default">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-success">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-warning">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-danger">Loading state</button></li>
                        </ul>
                        <h3>Single Toggle</h3>
                        <p>Button single toggle state default style</p>
                        <ul class="demo-btns">
                            <li><button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-success" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-warning" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-danger" data-toggle="button">Single toggle</button></li>
                        </ul>
                        <h3>Checkbox</h3>
                        <p>Button checkbox state default style</p>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 1
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 2
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 3
                            </label>
                        </div>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-primary">
                                <input type="checkbox"><i class="fa fa-apple"></i>
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"><i class="fa fa-android"></i>
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"><i class="fa fa-windows"></i>
                            </label>
                        </div>

                        <h3>Radio</h3>
                        <p>Button radio state default style</p>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option1"> Option 1
                            </label>
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option2"> Option 2
                            </label>
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option3"> Option 3
                            </label>
                        </div>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option1"><i class="fa fa-beer"></i>
                            </label>
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option2"><i class="fa fa-glass"></i>
                            </label>
                            <label class="btn btn-midnightblue">
                                <input type="radio" name="options" id="option3"><i class="fa fa-coffee"></i>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h3 class="mt0"> Alternate Loading State</h3>
                        <p>Button loading state default style <code>.loading-example-btn</code></p>
                        <ul class="demo-btns">
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-default-alt">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-success-alt">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-warning-alt">Loading state</button></li>
                            <li><button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-danger-alt">Loading state</button></li>
                        </ul>
                        <h3>Alternate Single Toggle</h3>
                        <p>Button single toggle state default style</p>
                        <ul class="demo-btns">
                            <li><button type="button" class="btn btn-primary-alt" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-success-alt" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-warning-alt" data-toggle="button">Single toggle</button></li>
                            <li><button type="button" class="btn btn-danger-alt" data-toggle="button">Single toggle</button></li>
                        </ul>
                        <h3>Alternate Checkbox</h3>
                        <p>Button checkbox state default style</p>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"> Option 1
                            </label>
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"> Option 2
                            </label>
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"> Option 3
                            </label>
                        </div>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"><i class="fa fa-apple"></i>
                            </label>
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"><i class="fa fa-android"></i>
                            </label>
                            <label class="btn btn-primary-alt">
                                <input type="checkbox"><i class="fa fa-windows"></i>
                            </label>
                        </div>

                        <h3>Alternate Radio</h3>
                        <p>Button radio state default style</p>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option1"> Option 1
                            </label>
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option2"> Option 2
                            </label>
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option3"> Option 3
                            </label>
                        </div>
                        <div class="btn-group mb10" data-toggle="buttons">
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option1"><i class="fa fa-beer"></i>
                            </label>
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option2"><i class="fa fa-glass"></i>
                            </label>
                            <label class="btn btn-midnightblue-alt">
                                <input type="radio" name="options" id="option3"><i class="fa fa-coffee"></i>
                            </label>
                        </div>
                    </div>
                </div>

                

            </div>
        </div>
    </div>
</div>



<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading"><h2>Social Icons</h2></div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <p>Included Social Icons with <a href="ui-icons">Font Awesome</a> can get relevant background colors with <code>.btn-social</code> class</p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-social btn-facebook"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-twitter"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-github"><i class="fa fa-github"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-behance"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-flickr"><i class="fa fa-flickr"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-jsfiddle"><i class="fa fa-jsfiddle"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-reddit"><i class="fa fa-reddit"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-youtube"><i class="fa fa-youtube"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-foursquare"><i class="fa fa-foursquare"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-google"><i class="fa fa-google"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-apple"><i class="fa fa-apple"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-soundcloud"><i class="fa fa-soundcloud"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-steam"><i class="fa fa-steam"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-spotify"><i class="fa fa-spotify"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-wordpress"><i class="fa fa-wordpress"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-tealpe"><i class="fa fa-skype"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-android"><i class="fa fa-android"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-digg"><i class="fa fa-digg"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-linkedin"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-googleplus"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-instagram"><i class="fa fa-instagram"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-windows"><i class="fa fa-windows"></i></a></li>
                        </ul>

                        <p>Alternate styles</p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-social btn-facebook-alt"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-twitter-alt"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-github-alt"><i class="fa fa-github"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-behance-alt"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-flickr-alt"><i class="fa fa-flickr"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-jsfiddle-alt"><i class="fa fa-jsfiddle"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-reddit-alt"><i class="fa fa-reddit"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-youtube-alt"><i class="fa fa-youtube"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-foursquare-alt"><i class="fa fa-foursquare"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-google-alt"><i class="fa fa-google"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-apple-alt"><i class="fa fa-apple"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-soundcloud-alt"><i class="fa fa-soundcloud"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-steam-alt"><i class="fa fa-steam"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-spotify-alt"><i class="fa fa-spotify"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-wordpress-alt"><i class="fa fa-wordpress"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-tealpe-alt"><i class="fa fa-skype"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-android-alt"><i class="fa fa-android"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-digg-alt"><i class="fa fa-digg"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-linkedin-alt"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-googleplus-alt"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-instagram-alt"><i class="fa fa-instagram"></i></a></li>
                            <li><a href="#" class="btn btn-social btn-windows-alt"><i class="fa fa-windows"></i></a></li>
                        </ul>

                    </div>
                    <div class="col-md-6">
                        <p>Or use them in conjecture with label buttons <code>.btn-label.btn-social</code></p>
                        <ul class="demo-btns">
                            <li><a href="#" class="btn btn-label btn-social btn-facebook"><i class="fa fa-facebook"></i>Facebook</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-twitter"><i class="fa fa-twitter"></i>Twitter</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-github"><i class="fa fa-github"></i>Github</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-behance"><i class="fa fa-behance"></i>Behance</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-flickr"><i class="fa fa-flickr"></i>Flickr</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-jsfiddle"><i class="fa fa-jsfiddle"></i>jsFiddle</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-reddit"><i class="fa fa-reddit"></i>Reddit</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-youtube"><i class="fa fa-youtube"></i>YouTube</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-foursquare"><i class="fa fa-foursquare"></i>Foursquare</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-google"><i class="fa fa-google"></i>Google</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-apple"><i class="fa fa-apple"></i>Apple</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-soundcloud"><i class="fa fa-soundcloud"></i>Soundcloud</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-steam"><i class="fa fa-steam"></i>Steam</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-spotify"><i class="fa fa-spotify"></i>Spotify</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-wordpress"><i class="fa fa-wordpress"></i>Wordpress</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-tealpe"><i class="fa fa-skype"></i>Skype</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-android"><i class="fa fa-android"></i>Android</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-digg"><i class="fa fa-digg"></i>Digg</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-linkedin"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-googleplus"><i class="fa fa-google-plus"></i>Google Plus+</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-instagram"><i class="fa fa-instagram"></i>Instagram</a></li>
                            <li><a href="#" class="btn btn-label btn-social btn-windows"><i class="fa fa-windows"></i>Windows</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
