CODEWITHSUNDEEP
htmlcssdjangoimagetwitter-bootstrap
sachin srivastava
sachin srivastava

Reputation: 163

not able to align images in bootstrap

I am trying to make a gallery of images of unknown number using HTML. I am using bootstrap to display the images and have some django template library coding. I am not able to align the images correctly. I am basically trying to use cycle tag in Django Template to display the row class in bootstrap after every 2 images. I want the images to appear in a row, each row with two images. The height of each image in the row should be aligned correctly. Right now the height is not aligned. One image is slightly higher than the other. Can you please help, this is my html file?

 <div class="container">
 {% load staticfiles %}
 {% for plot in plots%}
 {% with plot|add:".png" as image_static %}`
 <div class = "{% cycle 'row' '' %}">
  <div class = "col-md-5">
  <div class = "thumbnail">
    <img src="{% static image_static %}" alt="My image"/>
  </div>

  <div class = "caption">
     <h3>Thumbnail label</h3>
     <p>Some sample text. Some sample text.</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>
{% endwith %}
<br><br><br>
</div>
{% endfor %}
</div>

Upvotes: 2

Views: 84

Answers (1)

Serafeim
Serafeim

Reputation: 15084

It cannot be done with cycle! Here's how it could be done instead: 

{% for plot in plots%}
  {% with plot|add:".png" as image_static %}
    <div class='col-md-6'>
      <div class = "thumbnail">
        <img src="{% static image_static %}" alt="My image"/>
      </div>
      <!-- ... -->
    </div>
    {% if forloop.counter|divisibleby:"2" %}
      </div>
      <div class='row'>
    {% endif %}
  {% endwith %}
{% endfor %}

So, we close the row div and start a new one whenever the forloop index is divisible by 2, so we'll start a new row every two images!

Upvotes: 1

Related Questions