title: Bootstrap image gallery blank space
body: <p>I have an image gallery in Bootstrap that looks like this: <a href="https://i.imgur.com/kaTu9TB.png" rel="nofollow noreferrer">http://i.imgur.com/kaTu9TB.png</a></p>
  
  <p>Only in the 2nd row, and on some screen sizes (like 992px to 1200px), there is an empty row like the one in the image. If I remove e.g. first two or three images in the inspector, everything evens nicely, but doing that in the code doesn't help. </p>
  
  <p>Here's my code for this gallery: </p>
  
  <pre><code>&lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/bunarska-visoki-pritisak.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/bunarska-visoki-pritisak.png" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Bunarska pumpa visokog pritiska&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/demontaza-bunarske-pumpe.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/demontaza-bunarske-pumpe.jpg" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Demontaza bunarske pumpe&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/dubinske-pumpe-liveno-gvozdje.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/dubinske-pumpe-liveno-gvozdje.png" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Dubinske pumpe od livenog gvozdja&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/frekventna-regulacija.JPG"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/frekventna-regulacija.JPG" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Frekventna regulacija&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/komandno-upravljacki-orman.JPG"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/komandno-upravljacki-orman.JPG" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Komandno upravljacki orman&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/opremanje-arterijskog-bunara.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/opremanje-arterijskog-bunara.png" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Opremanje arterijskog bunara&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/postavljanje-bunarske-pumpe.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/postavljanje-bunarske-pumpe.png" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Postavljanje bunarske pumpe&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/pustanje-u-rad-bunarske-pumpe.jpg"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/pustanje-u-rad-bunarske-pumpe.png" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Pustanje u rad bunarske pumpe&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske"&gt;
                      &lt;a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/vertikalna.JPG"&gt;
                          &lt;img class="img-responsive" alt="" src="../img/bunarske/vertikalna.JPG" /&gt;
                          &lt;div class="text-center"&gt;
                              &lt;small class="text-muted"&gt;Vertikalna hidroforska posuda&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Everything is wrapped inside a container and a row. I use fancybox for the gallery, with jQuery.matchHeight plugin (<a href="https://github.com/liabru/jquery-match-height" rel="nofollow noreferrer">https://github.com/liabru/jquery-match-height</a>) for making the heights even. I initialized it like this:</p>
  
  <pre><code>$(".thumbnail").matchHeight();
  </code></pre>
  
  <p>I tried many things including setting clearfix, padding, adding row, resizing images and whatnot. Surely it will turn out to be something very trivial, but I am failing to see what exactly. All the other images in other sections display fine.  </p>