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!
