Ole Bläsing Ole Bläsing - 6 months ago 15
CSS Question

Bootstrap grid with different image heights

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:


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>

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


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;