OverHeat OverHeat - 27 days ago 7
HTML Question

Using for loops for dispaying values in django template

If I use "for loop", all data from Db are presented vertical. I wrote an example without HTML, for transparency. And second code "my.html" is with HTML code. I want to be divisions(or table) showed horizontally. If I run my.html I got two divisions displayed vertically, how can I position them horizontally? I want to display two divisions(or tables) next to each other horizontally and values like post.prop_one must be vertically displayed in division or table.

{% for post in posts %}
{{post.option_one}}
{{post.option_two}}
{% endfor %}


my.html

<!-- myprices -->
<div id="pricing" class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>blabla</h4>
</div> {% for post in posts %}
<div class="row slideanim-'inline'">
<div class="col-sm-4 col-xs-12">

<div class="panel panel-default text-center">
<div class="panel-heading">

<h1><a href="">{{ post.offer_option}}</a></h1>
</div>
<div class="panel-body">
<p><strong>20</strong> {{post.prop_one}}</p>
<p><strong>20</strong>{{post.prop_two}} </p>
<p><strong>20</strong>{{post.prop_three}}</p>
</div>
<div class="panel-footer">
<h3>{{ post.price}}</h3>
<h4>{{ post.period}}</h4>
</div>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
{% endfor %}

Answer

you loop whole content..all you want to loop is col-sm-4 col-xs-12. Your "for loop" and endingtag are wrong placed in your html. Here is an example

       <!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
  <div class="text-center">
    <h2>Pricing</h2>
      <h4>blabla</h4>
  </div>

    <div class="row slideanim-'inline'">
        {% for post in posts %}
    <div class="col-sm-4 col-xs-12">


      <div class="panel panel-default text-center">
        <div class="panel-heading">

      <h1><a href="">{{ post.offer_option}}</a></h1>
        </div>
          <div class="panel-body">
              <p><strong>20</strong> {{post.prop_one}}</p>
              <p><strong>20</strong>{{post.prop_two}} </p>
              <p><strong>20</strong>{{post.prop_three}}</p>
          </div>
           <div class="panel-footer">
            <h3>{{ post.price}}</h3>
            <h4>{{ post.period}}</h4>
           </div>
          <button class="btn btn-lg">Sign Up</button>
        </div>

      </div>{% endfor %}
    </div>