Ufdjrw

I'm working on a project using Django(2.1.7) and Bootstrap (3.1), I need to display 3 blog posts in each row:

Note: I have taken a look at various related questions but couldn't find any solution specific to my problem, so don't mark this question as duplicated, please!

here what I have tried:

<div class="container-fluid">
 <div class="row">
 <div class="col">
 <div class="col-lg-9">
 <div class="row">
 % for post in posts %
 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src=" post.photo.url "
 alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="% url 'blog-post' post.id %"
 class="text-uppercase text-muted text-sm letter-spacing-2"> post.category </a>
 <h5 class="my-2"><a href="post.html" class="text-dark"> post.title </a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i> post.created_at </p>
 <p class="my-2 text-muted text-sm"> post.content </p><a
 href="% url 'blog-post' post.id %" class="btn btn-link pl-0">Read more<i
 class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>
 % endfor %
 </div>
 </div>
 <div class="col-lg-3" style="background-color: darkgrey; height: 100%">
 <div class="container">
 <form class="form" style="margin-top: 3%">
 <input type="search" name="search" />
 <button type="submit">Search</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </div>

And here's the css for some of these elements:

.card-img-top 
 width: 100%;
 border-top-left-radius: calc(.4rem - 1px);
 border-top-right-radius: calc(.4rem - 1px);


img 
 vertical-align: middle;
 border-style: none;


.img-fluid 
 max-width: 100%;
 height: auto;
 max-height: 200px;
 min-height: 200px;


.card-body 
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
 padding: 1.25rem;


@media (min-width: 992px)
.col-lg-4 
 -ms-flex: 0 0 33.33333%;
 flex: 0 0 33.33333%;
 max-width: 33.33333%;
 

.h-100 
 height: 100% !important;

.shadow 
 box-shadow: 0 0 1rem rgba(0,0,0,0.15) !important;

.border-0 
 border: 0 !important;

.card 
 position: relative;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-direction: column;
 flex-direction: column;
 min-width: 0;
 word-wrap: break-word;
 background-color: #fff;
 background-clip: border-box;
 border: 1px solid rgba(0,0,0,0.125);
 border-radius: .4rem;


.row 
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-right: -12px;
 margin-left: -15px;

In safari inside the first row, it's displaying only 2 blog posts but in other rows, it's displaying 3 blog posts, See the screenshot below:

Update: Below is the generated HTML, taken from browser:

<div class="col-lg-9">
 <div class="row">
 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/automation_image.jpg" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/1" class="text-uppercase text-muted text-sm letter-spacing-2">Travel </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">This is the First Blog</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:11 a.m.</p>
 <p class="my-2 text-muted text-sm">This is the very first blog.</p><a href="/blog/post/1" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>




 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/freelance-dev-business.png" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/2" class="text-uppercase text-muted text-sm letter-spacing-2">DEFAULT </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">Second Blog Post</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:14 a.m.</p>
 <p class="my-2 text-muted text-sm">This is the second one.</p><a href="/blog/post/2" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>




 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/machine-learning-apprentissage-supervise-ou-non-et-par-renforcement-hli-lab.jpg" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/3" class="text-uppercase text-muted text-sm letter-spacing-2">LIVING </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">Third Post</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
 <p class="my-2 text-muted text-sm">This is the third blog post.</p><a href="/blog/post/3" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>



</div><!-- close existing row and open another one-->
<div class="row">



 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/skills.jpg" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/4" class="text-uppercase text-muted text-sm letter-spacing-2">Support </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">Another One</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
 <p class="my-2 text-muted text-sm">This is another one.</p><a href="/blog/post/4" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>




 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/JobExpert.jpg" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/5" class="text-uppercase text-muted text-sm letter-spacing-2">Medical </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">Fifth</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 7:43 a.m.</p>
 <p class="my-2 text-muted text-sm">This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.</p><a href="/blog/post/5" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>




 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src="/media/blog_images/IMG_1832.jpg" alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="/blog/post/6" class="text-uppercase text-muted text-sm letter-spacing-2">Support </a>
 <h5 class="my-2"><a href="post.html" class="text-dark">Sixth</a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
 <p class="my-2 text-muted text-sm">This is the sixth blog post here at BRT site.</p><a href="/blog/post/6" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>



</div><!-- close existing row and open another one-->
<div class="row">


</div>
 </div>

what can be wrong here? I'm new to Bootstrap.

Thanks in advance!

Try this one.

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

 <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
 <div class="card shadow border-0 h-100"><a href="post.html">
 <img src=" post.photo.url "
 alt="..." class="img-fluid card-img-top"></a>
 <div class="card-body"><a href="% url 'blog-post' post.id %"
 class="text-uppercase text-muted text-sm letter-spacing-2"> post.category </a>
 <h5 class="my-2"><a href="post.html" class="text-dark"> post.title </a></h5>
 <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i> post.created_at </p>
 <p class="my-2 text-muted text-sm"> post.content </p><a
 href="% url 'blog-post' post.id %" class="btn btn-link pl-0">Read more<i
 class="fa fa-long-arrow-alt-right ml-2"></i></a>
 </div>
 </div>
 </div>

% if forloop.counter

</div><!-- close existing row and open another one--> 
<div class="row">
% endif %
 % endfor %
</div>