Line Up Images In Bootstrap 3 Grid
I have two create grid with 3 x N images. As a result I need to have responsive style. My problem is that images have different width & height (I cannot control this) and are
Solution 1:
You have to clear your floats. With a dynamic number of floats that seems challenging but it's actually quite simple. Just use the handy nth-child selector in CSS.
Add the following CSS lines to your jsfiddle and you can see that it will clear each row of floats. Notice in your example you have rows of 2, hence the nth-child(2n+1):
.rowdiv.clear:nth-child(2n+1) {
clear:both;
}
Note: In your question you mention that you use "3 x N images" so that would be nth-child(3n+1).
Solution 2:
If you're going to clear your floats you have to do this in conjunction with media queries since you're placing a different number of "blocks" at different breakpoints.
@media (min-width: 1200px) {
.item:nth-child(3n+1) {
clear: left;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.item:nth-child(2n+1) {
clear: left;
}
}
See working example Snippets at Full Page.
Example 1
body {
margin: 10px;
}
.post {
margin-bottom: 20px;
}
.blogposttwo {
width: 100%;
float: left;
}
.blogposttwofigure {
width: 100%;
float: left;
}
.blogposttwofigurea {
float: left;
width: 100%;
}
.img-responsive,
.thumbnail > img,
.thumbnaila > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
@media (min-width: 1200px) {
.item:nth-child(3n+1) {
clear: left;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.item:nth-child(2n+1) {
clear: left;
}
}<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1822 post type-post status-publish format-standard has-post-thumbnail hentry category-music category-48"><figure><ahref="http://moneyti.co/18-tests2/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-tests2/">
ONE </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1816 post type-post status-publish format-standard has-post-thumbnail hentry category-awards category-48"><figure><ahref="http://moneyti.co/18-tests/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-tests/">
TWO </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1417 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-48"><figure><ahref="http://moneyti.co/pardaugavas-ekas-2/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/pardaugavas-ekas-2/">
THREE </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
FOUR </a></h4><!-- Post Title End --></div></div></div>Example 2: Varying Heights
body {
margin: 10px;
}
.post {
margin-bottom: 20px;
}
.blogposttwo {
width: 100%;
float: left;
}
.blogposttwofigure {
width: 100%;
float: left;
}
.blogposttwofigurea {
float: left;
width: 100%;
}
.img-responsive,
.thumbnail > img,
.thumbnaila > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
@media (min-width: 1200px) {
.item:nth-child(3n+1) {
clear: left;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.item:nth-child(2n+1) {
clear: left;
}
}<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet" /><divclass="container"><divclass="row"><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1822 post type-post status-publish format-standard has-post-thumbnail hentry category-music category-48"><figure><ahref="http://moneyti.co/18-tests2/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-tests2/">
ONE Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem IpsuLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,m has been the industry's standard dummy text ever since the 1500s, </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1816 post type-post status-publish format-standard has-post-thumbnail hentry category-awards category-48"><figure><ahref="http://moneyti.co/18-tests/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-tests/">
TWO Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1417 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-48"><figure><ahref="http://moneyti.co/pardaugavas-ekas-2/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/pardaugavas-ekas-2/">
THREE Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
FOUR Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
FIVE Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
SIX </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
SEVEN </a></h4><!-- Post Title End --></div><divclass="col-lg-4 col-sm-6 item"><divclass="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video"><figure><ahref="http://moneyti.co/18-video/"><imgsrc="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg"class="img-responsive hovereffect"alt=""></a></figure></div><!-- Post Title Start --><h4><ahref="http://moneyti.co/18-video/">
EIGHT </a></h4><!-- Post Title End --></div></div></div>Solution 3:
I solve this differently. I usually, for the sake of good architecture I use the row class after I used up the span of 12 for that row. But that is optional. One thing I do for sure to eliminate this is to assign a min-height to the column so that they continue to wrap accordingly.
In your case, like this:
.blogposttwofigure {
width: 100%;
float: left;
min-height: 280px;
}
Here is your solved DEMO
p.s the min-height controls the height of the container that holds the image. DO NOT do this the .img-responsive class which is being used in the actual image.
The max height is still unlimited allowing the img-responsive class to work. If, you want all photos to fall right underneath the other without any gaps, you need a different solution that is offered by Masonry.js See this link
Post a Comment for "Line Up Images In Bootstrap 3 Grid"