Menu
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!
714
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid So, to create the layout you want, create a container ( <div class="container"> ). Next, create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
As with every web framework, Django has a templating engine for creating dynamic HTML. The information that the user wants to access is created by this engine and presented through views.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
