Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has 12 columns in each row - any suggestions on how to address this problem?
HTML
<div class="container">
<h3 class="gallery-title">The Rainbow Run - 07 Dec 2014</h3>
<div class="gallery row">
<a href="{{ asset('img/gallery/rainbow_run/1.jpg') }}" class="col-md-3">
<img src="{{ asset('img/gallery/rainbow_run/1.jpg') }">
</a>
<a href="{{ asset('img/gallery/rainbow_run/2.jpg') }}" class="col-md-3">
<img src="{{ asset('img/gallery/rainbow_run/2.jpg') }">
</a>
<a href="{{ asset('img/gallery/rainbow_run/3.jpg') }}" class="col-md-3">
<img src="{{ asset('img/gallery/rainbow_run/3.jpg') }">
</a>
<a href="{{ asset('img/gallery/rainbow_run/4.jpg') }}" class="col-md-3">
<img src="{{ asset('img/gallery/rainbow_run/4.jpg') }">
</a>
<a href="{{ asset('img/gallery/rainbow_run/5.jpg') }}" class="col-md-3">
<img src="{{ asset('img/gallery/rainbow_run/5.jpg') }">
</a>
</div>
</div>
JS
$('.gallery').bootstrapGallery({});
$('.gallery').justifyGallery({
'maxRowHeight': '400px',
'spacing': 10,
'resizeCSS': {
'min-width' : 0,
'width': '300px',
'max-width' : '300px'
}
});