Bootstrap 3 display 3 blog posts in each row using in Django templatesFlexbox wraps last column of the first row in SafariCan “list_display” in a Django ModelAdmin display attributes of ForeignKey fields?Django Template Variables and JavascriptFormat numbers in django templatesCan I access constants in settings.py from templates in Django?Numeric for loop in Django templatesHow to get the current URL within a Django template?Django: Display Choice ValueHow to display the current year in a Django template?AngularJS with Django - Conflicting template tagsCannot display HTML string
How can "mimic phobia" be cured or prevented?
Can the US President recognize Israel’s sovereignty over the Golan Heights for the USA or does that need an act of Congress?
PTIJ: in nusach Yodeya, where in the t'filah do we acknowledge the fourth patriarch?
Why did the EU agree to delay the Brexit deadline?
Hero deduces identity of a killer
Strong empirical falsification of quantum mechanics based on vacuum energy density
What exact color does ozone gas have?
How to cover method return statement in Apex Class?
Did arcade monitors have same pixel aspect ratio as TV sets?
What should you do if you miss a job interview (deliberately)?
Does malloc reserve more space while allocating memory?
Need help understanding what a natural log transformation is actually doing and why specific transformations are required for linear regression
Can disgust be a key component of horror?
What if a revenant (monster) gains fire resistance?
Can I say "fingers" when referring to toes?
What is the evidence for the "tyranny of the majority problem" in a direct democracy context?
Pre-mixing cryogenic fuels and using only one fuel tank
Can a College of Swords bard use a Blade Flourish option on an opportunity attack provoked by their own Dissonant Whispers spell?
Temporarily disable WLAN internet access for children, but allow it for adults
Picking the different solutions to the time independent Schrodinger eqaution
Recommended PCB layout understanding - ADM2572 datasheet
Is there a RAID 0 Equivalent for RAM?
Invalid date error by date command
Is there an injective, monotonically increasing, strictly concave function from the reals, to the reals?
Bootstrap 3 display 3 blog posts in each row using in Django templates
Flexbox wraps last column of the first row in SafariCan “list_display” in a Django ModelAdmin display attributes of ForeignKey fields?Django Template Variables and JavascriptFormat numbers in django templatesCan I access constants in settings.py from templates in Django?Numeric for loop in Django templatesHow to get the current URL within a Django template?Django: Display Choice ValueHow to display the current year in a Django template?AngularJS with Django - Conflicting template tagsCannot display HTML string
1
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!
python django twitter-bootstrap-3
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
add a comment |
1
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!
python django twitter-bootstrap-3
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17
add a comment |
1
1
1
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!
python django twitter-bootstrap-3
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
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!
python django twitter-bootstrap-3
python django twitter-bootstrap-3
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
edited Mar 7 at 7:51
Abdul Rehman
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
asked Mar 7 at 6:26
Abdul RehmanAbdul Rehman
1,091827
1,091827
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17
add a comment |
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17
add a comment |
1 Answer
1
active
oldest
votes
0
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>
answered Mar 7 at 7:42
art06art06
811515
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55037333%2fbootstrap-3-display-3-blog-posts-in-each-row-using-in-django-templates%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>
answered Mar 7 at 7:42
art06art06
811515
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
add a comment |
0
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>
answered Mar 7 at 7:42
art06art06
811515
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
add a comment |
0
0
0
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>
answered Mar 7 at 7:42
art06art06
811515
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>
answered Mar 7 at 7:42
art06art06
811515
answered Mar 7 at 7:42
art06art06
811515
answered Mar 7 at 7:42
art06art06
811515
answered Mar 7 at 7:42
art06art06
811515
811515
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
add a comment |
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Still not working, not its displaying 2 posts on first then 1 post on the next row and then again on next row display 2 and so on...
– Abdul Rehman
Mar 7 at 7:46
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
Could you please check/post the relevant portion of generated HTML code taken from browser's view source option?
– art06
Mar 7 at 7:49
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55037333%2fbootstrap-3-display-3-blog-posts-in-each-row-using-in-django-templates%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The generated html is fine and gives perfect 3 columns in two rows for me (though, there's an empty row which need to be removed by adding another condition). You might have some other thing that interferes the layout? Any way to share a demo link?
– art06
Mar 7 at 8:11
it's not working only in safari!
– Abdul Rehman
Mar 7 at 9:04
There seems a bug in iOS browsers when using felxbox (see Flexbox wraps last column of the first row in Safari). Let me ask, why do you need to flexbox when you have bootstrap css?
– art06
Mar 7 at 9:17