CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
junta
junta

Reputation: 201

Bootstrap columns does not align correctly

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

Upvotes: 0

Views: 1273

Answers (1)

daan.desmedt
daan.desmedt

Reputation: 3820

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

Upvotes: 1

Related Questions