Bootstrap grid with different image heights

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