Bootstrap grid with different image heights - css

Question

I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:
Screenshot
But what I want is
The code to generate the grid looks like this:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
I'm using Vue.js for this template.
So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.
Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.
Thanks for your help! :)

Answer 1

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

Answer 2

There are a few ways to achieve this.
Wrap each row into it's own row
<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>
You can also set a min-height for each item, that way they will always be the same height.
Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.
Hope this helps :P