enter image description here

Please help me deal with the columns, I can’t do it like in the picture, I try for a good hour, all the time the middle column, then more than the rest. How to make so that columns with images inside were located just such a tile?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel=stylesheet> <div class="container"> <div class="row"> <div class="left-col hidden-xs col-sm-4"> <div class="thumbnail"> <img src="images/Pic1.jpg" alt="..."> </div> <div class="thumbnail"> <img src="images/Pic2.jpg" alt="..."> </div> </div> <div class="middle-col col-sm-4"> <div class="thumbnail"> <img src="images/Pic3.jpg" alt="..."> </div> <div class="thumbnail"> <img src="images/Pic4.jpg" alt="..."> </div> <div class="thumbnail"> <img src="images/Pic5.jpg" alt="..."> </div> </div> <div class="right-col hidden-xs col-sm-4"> <div class="thumbnail"> <img src="images/Pic6.jpg" alt="..."> </div> <div class="thumbnail"> <img src="images/Pic7.jpg" alt="..."> </div> </div> </div> </div>

    1 answer 1

    as an option

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .container-custom { padding-right: 5px; padding-left: 5px; } .container-custom .row { margin-left: -5px; margin-right: -5px; } .container-custom .row [class*=col-] { padding-left: 5px; padding-right: 5px; } .container-custom .thumbnail { margin-bottom: 10px; padding: 0 0 53.05%; position: relative; height: 0; overflow: hidden; } .container-custom .thumbnail-1 { padding: 0 0 109.33%; } .container-custom .thumbnail-2 { padding: 0 0 53.33%; } .container-custom .thumbnail>img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .thumbnail-custom { margin-top: calc(-53.33% - 10px); } 
     <div class="container container-custom"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-1"> <img src="http://placehold.it/375x410" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-2"> <img src="http://placehold.it/375x200" alt=""> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/375x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-1 thumbnail-custom"> <img src="http://placehold.it/375x410" alt=""> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-1"> <img src="http://placehold.it/375x410" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-2"> <img src="http://placehold.it/375x200" alt=""> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/375x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail"> <img src="http://placehold.it/370x200" alt=""> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="thumbnail thumbnail-1 thumbnail-custom"> <img src="http://placehold.it/375x410" alt=""> </div> </div> </div> </div>