How to render django blog posts in a row? - html

Question

Why my post going under? How to fix this
post_detail_html
<div class="container">
<div class="section-fluid ">
<br />
<div class="row">
<div class="col-md-4">
<div class="card-deck">
<div class="card card card-blog">
<div class="card-image">
<a href="#pablo">
<img class="img rounded img-raised" src="{{ post.thumbnail.url }}" />
</a>
</div>
<div class="card-body">
<a class="badge badge-success" href="{% url "blog:post_list_by_tag" tag.slug %}">
</a>
<h4 class="card-title">
{{ post.title }}
</h4>
<p class="card-description">
{{ post.body|truncatewords:30|linebreaks }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
check this image;
How to make like this, in a row (3 cards);

Answer 1

You are displaying each blog post inside a div with class="row" which is causing each blog post to get its own row.
I am assuming your blog posts are being rendered with for loop somewhere in the template.
Try putting two blog posts in each row div by replacing your forloop with something like this:
{% for post in blog_posts %}
{% if forloop.counter0|divisibleby:2 %}
<div class="row">
<div class="col-md-4">
<div class="card-deck">
<div class="card card card-blog">
<div class="card-image">
<a href="#pablo">
<img class="img rounded img-raised" src="{{ post.thumbnail.url }}" />
</a>
</div>
<div class="card-body">
<a class="badge badge-success" href="{% url "blog:post_list_by_tag" tag.slug %}">
</a>
<h4 class="card-title">
{{ post.title }}
</h4>
<p class="card-description">
{{ post.body|truncatewords:30|linebreaks }}
</p>
</div>
</div>
</div>
</div>
{% with next_post=list|next:forloop.counter0 %}
{% if next_post %}
<div class="col-md-4">
<div class="card-deck">
<div class="card card card-blog">
<div class="card-image">
<a href="#pablo">
<img class="img rounded img-raised" src="{{ next_post.thumbnail.url }}" />
</a>
</div>
<div class="card-body">
<a class="badge badge-success" href="{% url "blog:post_list_by_tag" tag.slug %}">
</a>
<h4 class="card-title">
{{ next_post.title }}
</h4>
<p class="card-description">
{{ next_post.body|truncatewords:30|linebreaks }}
</p>
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}