{% extends 'layout.html' %}
{% block content %}

    <div class="container">
        <div style="margin-bottom:10px">
            <div class="bs-example">
                {% for item in queryset %}
                    {% if forloop.counter0|divisibleby:3 %}
                        <div class="row">
                    {% endif %}
                    <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img alt="100%x200"
                             src="/media/{{ item.img }}"
                             style="height: 200px; width: 100%; display: block;">
                        <div class="caption">
                            <h2>{{ forloop.counter }}</h2>
                            <h3>{{ item.name }}</h3>
                            <p>{{ item.count }}万人.</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                                                                               class="btn btn-default"
                                                                                               role="button">Button</a>
                            </p>
                        </div>
                    </div>
                </div>

                {% if forloop.counter|divisibleby:3 or forloop.last %}
                    </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>


        <ul class="pagination">
            {{ page_nav }}
        </ul>

    </div>

{% endblock %}