How to make data that comes from Django database appear horizontally?

Question

In this Image, the data appears in vertical format. But I want data in horizontal format.

{% block title %}Blog{% endblock title %}

{% block body %} 


<div class="container">
    <div class="row">


{% for post in posts%}


<div class="col-lg-3">


<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->

    <img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

</div>
</div>

</div>



<div class="post block">
    <h2 class="subtitle">{{post.title}}</h2>


    <small>Posted At {{post.date_added}}</small>



    <p>{{post.intro}}</p>


        <a href="{% url 'post_detail' post.slug %}">Read More</a>

</div>


{% endfor %}

{% endblock body %}

Hi There I'm Newbie In Django How Can I Able To Appear Horizontally The Data Is Come From Database

Answer 1

So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside

Check This Code

{% extends 'base.html' %}

{% block title %}Blog{% endblock title %}

{% block body %} 


 <div class="container">
    <div class="row"> 


{% for post in posts%}


<div class="col-lg-4">


<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->

    <img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div class="card-body">
      <h5 class="card-title">{{post.title}}</h5>
      {{post.date_added}}
      <p class="card-text">{{post.intro}}</p>
      <a href="{% url 'post_detail' post.slug %}" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

</div>





{% endfor %}
</div>

</div>

{% endblock body %}