Bootstrap Grid with Different Image Heights

Bootstrap grid with different image heights

You need to add something every 2 col-md-6 to ensure the left floats clear..

One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..

@media (min-width: 768px) {
    .row > .col-md-6:nth-child(2n+1) {
        clear: left;
    }
}

http://www.codeply.com/go/oAiZNlWgau

How to equal images height in bootstrap different two column size

Create a containing divider for each image which will have a static height and a variable width. You can then use background-image and background-size: cover. Example:

.image-container{
 height: 500px;
 width: 100%;
 background-size: cover;
}

And then for HTML try the following:

    <div class="row">
          <div class="col-md-8 " >
             <div class="image-container" style="background-image: url('images/green.jpg');">
             </div>
          </div>

          <div class="col-md-4" >
             <div class="image-container" style="background-image: url('images/green.jpg');">
             </div>
          </div>
     </div>

Setting images of equal size in Bootstrap

 <div class="col-lg-4 col-sm-6">
  <a href="#"> <div class='box'><img class="img-fluid" src="images/i6.jpg" /></div></a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>

just put inside a div and give the css with fixed size

.box{
  height:250px;
    width:300px;
    overflow:hidden;
}

Bootstrap row with columns of different height

This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3, Bootstrap 4 and Bootstrap 5...

Bootstrap 5 (update 2021)

Bootstrap columns still use flexbox, but the card-columns previously used to create a Masonry like layout have been removed. For Bootstrap 5 the recommended method is to use the Masonry JS plugin:
Bootstrap 5 Masonry Example

Bootstrap 4 (update 2018)

All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.

Bootstrap 3 (original answer -- pre flexbox)

The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first

---

There are a few ways to fix this.. (updated for 2018)

1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (single tier)

Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3

There is also a CSS-only variation of the 'clearfix'

CSS-only clearfix with tables

---

**2 - Make the columns the same height (using flexbox):**

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

---

**3 - Un-float the columns an use inline-block instead..**

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

Demo of inline block fix

---

4 - CSS3 columns approach (Masonry/Pinterest like solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery approach

Finally, you may want to use a plugin such as Isotope/Masonry:

Bootstrap Masonry Demo

Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---

Making all images appear with the same height in bootstrap

You could take off the width/height attributes in the HTML and do this with CSS. Just set your height explicitly, and your width as auto. For example:

.img-responsive {
    width: auto;
    height: 100px;
}

You'll need to be careful that you leave enough space horizontally because you won't know the exact width of any of these images once they've been scaled.

Bootstrap grid with different thumbnail height

You need to enclose each row in a class="row"

http://getbootstrap.com/css/#grid

<div class="row">
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="800x500.jpg" alt="Sample Image">
         <div class="caption">
              <h3>Image 800x500</h3>
            </div>
        </div>
     </div>
   </div> 
   <div class="col-md-6">
     <div class="thumbnail">
      <img src="400x500.jpg" alt="Sample Image">
         <div class="caption">
              <h3>Image 400x500</h3>
         </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="400x500.jpg" alt="Sample Image">
         <div class="caption">
              <h3>Image 400x500</h3>
         </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="800x500.jpg" alt="Sample Image">
         <div class="caption">
              <h3>Image 800x500</h3>
         </div>
    </div>
  </div>
</div>

To get the precise kind of layout you linked to, you'll need to use something other than the Bootstrap grid system. It doesn't work like that.

---

Related Topics