Bootstrap columns does not align correctly

Question

I have a weird bug in my columns that I can't identify, I don't know if it is my fault or a bootstrap thingy.

Basically, I have a single <div class="row"> that may contains many <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> . What I simply wants to achieve is that all col* items fit on the screen (100% width) and aligning each other when resizing. This works very well normally, except in this JSFiddle .

The problem is that on some rows, one div goes completly crazy and will not align correctly in the row (try to resize slowly the result in the fiddle, you will see what I mean).

I'm using bootstrap 3.3.6 and Chrome to its latest version (tried on FF, same weird result...). "clearfix" does nothing. I have tried packery.js with the same result.

This answer ( Bootstrap columns not aligning correctly ) would have helped me, but I don't know in advance how many columns I will have (because that will depend on the screen size) ...

Of course, I have tried setting min-height to each .gallery-item ...

Any ideas ?

Thanks in advance,

Update , here are the missing CSS that appears in my code:

div.gallery-item {
    margin-bottom: 15px;
}

div.gallery-item, div.gallery-item * {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}

.gallery-item {
    cursor: pointer;
}

.gallery-item.active {
    background-color: rgba(128,192,255,0.5);
}

Second update , following the advices, I get it to work by adding a fixed height for each gallery-item, like that:

.gallery-item {
  height: 300px;
}

Thanks to all :)

Answer 1

The problem is because not all columns inside the row are equal height. Have a look at the following to ensure the equal column height.

Link here

Updated you Fiddle with this approach, have a look at updated Fiddle

Added CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Added CSS class to the gallery-item

row-eq-height gallery-item