How to make dynamic content display across a grid using Django with Bootstrap?

Question

I'm working on a Django project with a homepage similar to StackOverflow's: it displays snippets of incoming user-generated content in a single main column. However, I'd like those content snippets to display across rows of 3 filling up the homepage (think [Pinterest pinboard page][2] or a grid layout blog).

I'm using Bootstrap's grid system, but realized I don't know the right combination of Python/Django template magic + Bootstrap to get that incoming content to populate across a grid. Can someone spell this out for me?

I want...

            {% for question in questions.paginator.page %}
            {% question_list_item question %}
            {% endfor %}

...to have the repeating effect of

<div class="container">
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
</div>

Update: I was able to get this working (with a little column-count variation for responsiveness) using the following, but I'm a beginner so please let me know if there's a better solution.

                    <div class="row">
                        {% for question in questions.paginator.page %}
                        <div class="col-lg-3 col-sm-6 col-xs-12">
                            {% question_list_item question %}
                        </div>
                        {% if forloop.counter|divisibleby:4 %}
                    </div>
                    <div class="row">
                        {% endif %}
                        {% endfor %}
                    </div>

Thank you!

Answer 1

I had the same problem and here is my solution:

html

<div class="container">
  <div class="row">
  {% for question in questions.paginator.page %}
  {%  if forloop.counter|divisibleby:3 %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  </div>
  {% if not forloop.last %} 
  <div class="row">
  {% endif %}
  {% else %} 
    <div class="col-md-4">
      {{ question.title }}
    </div>
  {% endif %}
  {% endfor %}
  </div>
</div>