CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
renathy
renathy

Reputation: 5355

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 resized proportional. As a result images are not lined up. As you can see in image below the grid should have 3 images in first line and one image in second line. All images should be lined up with equal height.

enter image description here

Html:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-tests2/">    
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg" class="img-responsive hovereffect">
          </a>
        </figure>
      </div>
      <h4>
          <a href="http://moneyti.co/18-tests2/">18 tests2</a>
       </h4>          
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-tests/">  
            <img src="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/18-tests/">
                    18 tests                </a>
            </h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/pardaugavas-ekas-2/">

            <img src="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/pardaugavas-ekas-2/">
                    Pārdaugavas ēkas3               </a>
            </h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-video/">

            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/18-video/">
                    Raksts 18+              </a>
            </h4>
    </div>    
  </div>
</div>

CSS: I have some additional CSS styles, but the problem is also without them.

.post {
  margin-bottom: 20px;
}

.blogposttwo {
  width: 100%;
  float: left;
}

.blogposttwo figure {
  width: 100%;
  float: left;
}

.blogposttwo figure a {
  float: left;
  width: 100%;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

Fiddler: https://jsfiddle.net/dhzL6hnm/

Upvotes: 3

Views: 548

Answers (3)

vanburen
vanburen

Reputation: 21663

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;
}
.blogposttwo figure {
  width: 100%;
  float: left;
}
.blogposttwo figure a {
  float: left;
  width: 100%;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > 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;
  }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1822 post type-post status-publish format-standard has-post-thumbnail hentry category-music category-48">
        <figure>
          <a href="http://moneyti.co/18-tests2/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-tests2/">
					ONE			</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1816 post type-post status-publish format-standard has-post-thumbnail hentry category-awards category-48">
        <figure>
          <a href="http://moneyti.co/18-tests/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-tests/">
					TWO				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1417 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-48">
        <figure>
          <a href="http://moneyti.co/pardaugavas-ekas-2/">

            <img src="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/pardaugavas-ekas-2/">
					THREE				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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;
}
.blogposttwo figure {
  width: 100%;
  float: left;
}
.blogposttwo figure a {
  float: left;
  width: 100%;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > 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;
  }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1822 post type-post status-publish format-standard has-post-thumbnail hentry category-music category-48">
        <figure>
          <a href="http://moneyti.co/18-tests2/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1816 post type-post status-publish format-standard has-post-thumbnail hentry category-awards category-48">
        <figure>
          <a href="http://moneyti.co/18-tests/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1417 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-48">
        <figure>
          <a href="http://moneyti.co/pardaugavas-ekas-2/">

            <img src="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="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>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-video/">
					SIX				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-video/">
					SEVEN				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-video/">
					EIGHT				</a>
			</h4>
      <!-- Post Title End -->
    </div>

  </div>
</div>

Upvotes: 2

LOTUSMS
LOTUSMS

Reputation: 10240

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:

.blogposttwo figure {
    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

Upvotes: 1

Matt K
Matt K

Reputation: 6709

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):

.row div.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).

Upvotes: 3

Related Questions