Bootstrap broken grid in gallery

Question

I am trying to create a video gallery that shows a different number of images per row based on the screen size, using Bootstrap.

I started from this blog post: http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

My end result is here: http://jsfiddle.net/mk2r974o/

<div class="container">

  <h2>Video Gallery</h2>
  <ul class="gallery row">

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">
          Streamline integration with backend systems using MobileFirst
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Development</span>

        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">
          Creating a Windows Native C# app connecting to MobileFirst
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">
          Continuous Integration
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">integration</span>

        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">
          IBM MobileFirst Platform Foundation With Android ProGuard
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics for LOB
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics console
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=XtlJI4ZemZQ" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/XtlJI4ZemZQ/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics Custom Charts
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=cKM5480-6wI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/cKM5480-6wI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">java</span>

        <span class="label label-info">adapters</span>

        <figcaption class="figure-caption">
          Getting familiar with Java adapters - part 1
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Z2QUi33_a5k" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Z2QUi33_a5k/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">java</span>

        <span class="label label-info">adapter</span>

        <figcaption class="figure-caption">
          Getting familiar with Java adapters - part 2
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=uyeGupYSZj4" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/uyeGupYSZj4/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">OAuth</span>

        <span class="label label-info">security</span>

        <figcaption class="figure-caption">
          OAuth security - part 1
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=eeFBCptXLFU" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/eeFBCptXLFU/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">OAuth</span>

        <span class="label label-info">security</span>

        <figcaption class="figure-caption">
          OAuth security - part 2
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">CLI</span>

        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">
          Integrating IBM MobileFirst CLI with Grunt
        </figcaption>
      </figure>
    </li>

  </ul>
</div>

Sometimes it looks fine:

Sometimes it sticks one of the thumbnails to the right:

Answer 1

Using clearfix is the way to go but it is convoluted to say the least and I probably won't explain it very well so my apologies in advance.

See Responsive Grid Resets

Basically you're going to have to clear your columns based on the breakpoints. You have a col-md-2 and col-lg-2 so you'll apply clearfix after 6 columns with something like:

<div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>

and then again for your col-xs-4 with:

<div class="clearfix visible-xs-block"></div> after 3 columns.

You (not always) have to use clearfix with the Responsive utilities classes as well.

See the working example I posted at Full Page and slowly reduce the browser size.

(*The second example is just to compare the same gallery but with col-xs-6 since these become very small on mobile at col-xs-4)

.gallery {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.gallery li {
  list-style: none;
  margin-bottom: 25px;
}
.gallery li figure .thumbnail {
  margin-bottom: 0;
  margin-top: 10px;
}
.gallery li figure figcaption {
  padding-top: 1px;
  font-size: 90%;
}
/**FOR DEMO ONLY**/

#one {
  background: lightblue;
}
#two {
  background: teal;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid" id="one">
  <h2>Video Gallery</h2>

  <ul class="gallery row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Streamline integration with backend systems using MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Development</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">Creating a Windows Native C# app connecting to MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">Continuous Integration</figcaption>
      </figure>
    </li>
    <!-- CLEARFIX XS COL -->
    <div class="clearfix visible-xs-block"></div>
    <!-- CLEARFIX XS COL -->
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">IBM MobileFirst Platform Foundation With Android ProGuard</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics for LOB</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics console</figcaption>
      </figure>
    </li>
    <!-- CLEARFIX LG COL -->
    <div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>
    <!-- CLEARFIX LG COL -->
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=XtlJI4ZemZQ" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/XtlJI4ZemZQ/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics Custom Charts</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=cKM5480-6wI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/cKM5480-6wI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">java</span>
        <span class="label label-info">adapters</span>

        <figcaption class="figure-caption">Getting familiar with Java adapters - part 1</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Z2QUi33_a5k" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Z2QUi33_a5k/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">java</span>
        <span class="label label-info">adapter</span>

        <figcaption class="figure-caption">Getting familiar with Java adapters - part 2</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=uyeGupYSZj4" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/uyeGupYSZj4/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">OAuth</span>
        <span class="label label-info">security</span>

        <figcaption class="figure-caption">OAuth security - part 1</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=eeFBCptXLFU" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/eeFBCptXLFU/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">OAuth</span>
        <span class="label label-info">security</span>

        <figcaption class="figure-caption">OAuth security - part 2</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
  </ul>
</div>
<div class="container-fluid" id="two">
  <h2>Example 2</h2>

  <ul class="gallery row">
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Streamline integration with backend systems using MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Development</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">Creating a Windows Native C# app connecting to MobileFirst</figcaption>
      </figure>
    </li>
    <!-- CLEARFIXXS COL -->
    <div class="clearfix visible-xs-block"></div>
    <!-- CLEARFIXXS COL -->
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">Continuous Integration</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">IBM MobileFirst Platform Foundation With Android ProGuard</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics for LOB</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics console</figcaption>
      </figure>
    </li>
  </ul>
</div>

Answer 2

short answer

This is how bootstrap handles inconsistent heights in grid columns. (Actually, it goes deeper than that, but let's go with that answer for now. :) )

To fix, use one of:

• apply <div class="clearfix"></div> after your column divs
• add a consistent height to the css for your column classes.

I tinkered with your fiddle and had some trouble slipping div.clearfix between the li's (of course), so I updated it with height:180px on your li's. In your particular use-case, consistent height seems to be appropriate.

Updated fiddle

more involved answer

What's happening here:

Bootstrap fills in column divs left-to-right, where space is available. Since your first two divs (in the screenshot) occupy more vertical space, BS doesn't find the space for the next row until it hits the 3rd div.

why those fixes work:

div.clearfix (probably the official solution) does what you would expect a clearfix to do.

Forcing heights normalizes the vertical space the divs occupy. If this doesn't fit your use-case (maybe it truncates some divs), you can use a js solution that iterates the divs in a row (visible row, not div.row), giving them the appropriate vertical space they need.

Answer 3

Try setting a fixed height for the col-*-* classes instead of applying a margin-bottom to them. So you can write something like:

.gallery li {
  list-style: none;
  //margin-bottom: 25px; this is not needed
  height: 250px;
}

JSFiddle: http://jsfiddle.net/mk2r974o/6/

Hope that helps.