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

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

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Images</h2>
                <div class="options">

                </div>
            </div>
            <div class="panel-body">
                <p>Add classes to an <code>img</code> element to easily style images in any project.</p>
                <img src="{{'demo/images/thmb_arch_building.jpg' | asset_url | img_loc }}" class="img-rounded" alt="Olivia Wilde" style="margin: 5px 5px 10px;">
                <img src="{{'demo/images/thmb_ind_code.jpg' | asset_url | img_loc }}" class="img-circle" alt="Scarlett Johannson" style="margin: 5px 5px 10px;">
                <img src="{{'demo/images/thmb_nature_mossytree.jpg' | asset_url | img_loc }}" class="img-thumbnail" alt="Emma Watson" style="margin: 5px 5px 10px;">

                <p><code>&lt;img src="..." alt="..." class="img-rounded"&gt;</code></p>
                <p><code>&lt;img src="..." alt="..." class="img-circle"&gt;</code></p>
                <p><code>&lt;img src="..." alt="..." class="img-thumbnail"&gt;</code></p>

                <p>Images in Avenger, thanks to Bootstrap 3, can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This ensures that even large images scale down to the parent</p>
                <img src="{{'demo/images/arch_fountain.jpg' | asset_url | img_loc }}" alt="Fountain" class="img-responsive img-thumbnail">
            </div>
        </div>
    </div>
</div>
{% endblock %}
