Bootstrap grid layout inserts a blank div when resized

Question

I have a collection of pictures in a grid. I'm using "col-lg-4 col-md-6" to get it to go 3x3 pictures in large or 2x2 in medium. However a blank div gets inserted for my medium size layout.

Take a look here at what I mean. http://jsfiddle.net/DTcHh/18945/

What did I do wrong?

Answer 1

You just have to had

          <div class="clearfix visible-md"></div>

After each double

Fiddle : http://jsfiddle.net/o2w0edy6/

Here is the doc : http://getbootstrap.com/css/#grid-responsive-resets

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1430916273432-273c2db881a0%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3Df047e8284d2fdc1df0fd57a5d294614d">
                <img src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1430916273432-273c2db881a0%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3Df047e8284d2fdc1df0fd57a5d294614d" class="img-responsive" alt="Image 1">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/getrefe/regular/tumblr_nqune4OGHl1slhhf0o1_1280.jpg">
                <img src="//splashbase.s3.amazonaws.com/getrefe/regular/tumblr_nqune4OGHl1slhhf0o1_1280.jpg" class="img-responsive" alt="Image 2">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
      <div class="clearfix visible-md"></div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1433959352364-9314c5b6eb0b%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3D3b9bc6caa190332e91472b6828a120a4">
                <img src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1433959352364-9314c5b6eb0b%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3D3b9bc6caa190332e91472b6828a120a4" class="img-responsive" alt="Image 3">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-moto-drawing-illusion-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-moto-drawing-illusion-nabeel-1440x960.jpg" class="img-responsive" alt="Image 4">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
      <div class="clearfix visible-md"></div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-new-york-crosswalk-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-new-york-crosswalk-nabeel-1440x960.jpg" class="img-responsive" alt="Image 5">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-clothes-exotic-travel-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-clothes-exotic-travel-nabeel-1440x960.jpg" class="img-responsive" alt="Image 6">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>