<div class="row gallery"> <div class="col-md-3 col-xs-6 col-sm-3"> <img src="img/gallery1.png" alt=""> <img src="img/gallery5.png" alt=""> <img src="img/gallery9.png" alt=""> </div> <div class="col-md-3 col-xs-6 col-sm-3"> <img src="img/gallery2.png" alt=""> <img src="img/gallery6.png" alt=""> <img src="img/gallery10.png" alt=""> </div> <div class="col-md-3 col-xs-6 col-sm-3"> <img src="img/gallery3.png" alt=""> <img src="img/gallery7.png" alt=""> <img src="img/gallery11.png" alt=""> </div> <div class="col-md-3 col-xs-6 col-sm-3"> <img src="img/gallery4.png" alt=""> <img src="img/gallery8.png" alt=""> <img src="img/gallery12.png" alt=""> </div> </div>

enter image description here

3 column left to the right an incomprehensible void is formed

    2 answers 2

    I think it is necessary to add a block-row to each block of images.

     .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } .gallery img{ width: 100px; height: 100px; } 
     <div class="container-fluid"> <div class="row gallery"> <div class="col-md-6 col-sm-6 col-xs-12"> <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1"> <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016"> <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png"> </div> </div> <div class="row gallery"> <div class="col-md-6 col-sm-6 col-xs-12"> <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1"> <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016"> <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png"> </div> </div> <div class="row gallery"> <div class="col-md-6 col-sm-6 col-xs-12"> <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1"> <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016"> <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png"> </div> </div> </div>

      Using bootstrap, newbies are in a little ignorance, namely, that bootstrap will fix all the errors for them - both strategic and tactical))) In this case, just look carefully at the example of using the bootstrap gallery to understand that ALL the pictures have the same height! As you will do it in your case - there are several ways. And this is a tactic! And the strategy - which is erroneous in your case - is that you shove different-sized pictures with different proportions into the store! This is at least a complete disregard for potential customers! For the store goods must be prepared! And the product picture is part of the product !!!

      • why then at all extensions ok? But only mobile is buggy. Moreover, I looked at the gallery there with different heights of the picture - Vlad467
      • @ Vlad467 look in DevTools , and set the pictures width: 100% and additionally max-width: - size indicate the real one that is on the pictures - Bert