Adaptive grid of squares in bootstrap

Question

I want to create a grid of sensitive images that are always square in Bootstrap.

So far I got this: Jsfiddle Link

This part makes the elements be square all the time:

.frontpage_square { position:relative; overflow:hidden; padding-bottom:100%; } .frontpage_square img { position:absolute; } 

The larger square on the left and the nine smaller ones on the right are correct, but I cannot understand how I can distribute the nine squares on the right to the entire height. Thus, basically they should take the entire height on the left, a large area.

Answer 1

It's simple, you are not organizing your divs correctly. Use bootstrap using divs correctly. Once this is done, you can make the column the same size using this SO question .

jsfiddle

 <div class="row"> <div class="col-sm-6 panel"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-6 panel"> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4 "> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4 "> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> <div class="col-sm-4"> <a href="#" class="thumbnail"> <div class="frontpage_square"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> </div>