angelo942 angelo942 - 1 month ago 4
CSS Question

Bootstrap layout issue when displaying images

I've been facing this issue for a day or so. Basically I have this code

<div class="container">
<div class="row">
{% for post in posts %}

<div class="col-md-6">
<div class="thumbnail">
<img src="{{ post.image.url }}" alt="...">
<div class="caption">
<h3>{{ post.title }}</h3>
<p>{{ post.body|truncatechars:120 }}</p>
<p><a href="#" class="btn btn-primary" role="button">View</a></p>
</div>
</div>
</div>

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


I would like to have two columns next to each other with an image diplayed. At the moment the first line is alright 2 images are displayed properly but on the second line only one is display. There is no margin or padding which block two images to be displayed on each second row.

Image for the issue here

h3k h3k
Answer

I can suggest one thing from where your can start. Make the text and the images of each post identically the same. Reload and see if the content is showing normally. If yes you will have to follow the suggestion which @richfinelli made and play around with the heights in the dev tools.

Comments