7

I want to create a grid of responsive images that are always squared in Bootstrap.

So far I got this: Jsfiddle Link

This part forces the elements to be squared all the time:

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

.frontpage_square img {
    position:absolute;
}

The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square.

jacobq
  • 11,209
  • 4
  • 40
  • 71
nucci
  • 137
  • 1
  • 3
  • 13
  • I can achieve it easily by doing some math. But why would you want such a messy grid system..? – Riddler Jul 06 '15 at 13:56
  • 1
    Why is it messy? It is sth. like "1 featured element in bigger size and 9 normal elements in smaller size in a grid beside it". Nothing too crazy here or am I wrong? – nucci Jul 06 '15 at 13:59
  • Nothing wrong about it.. But the output contains too much padding and also the way you have achieved a square thumbnail `padding:100%` may not be the best. – Riddler Jul 06 '15 at 14:05
  • For future readers using Bootstrap 4, [this question may be helpful](https://stackoverflow.com/questions/49692456/bootstrap-grid-square-tiles-with-same-horizontal-vertical-gap/49692667#49692667) – Carol Skelly Mar 09 '19 at 11:17

1 Answers1

6

It is simple, you aren't arranging your divs properly. Make use of bootstrap by using the divs properly. Once that is done, you can make the column all same size by using this S.O. 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>
Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • Okay, first thing I found out: used an old version of Bootstrap. Fixed that and used your method. But after a fair amount of googling I still don't know how I can give the right block of 9 squares the same height as the single big left square. As in your jsfiddle, the last row of the 9 squares always ends a few pixel higher than the big square. So it seems like they have a padding-bottom I don't want them to have... – nucci Jul 06 '15 at 20:13
  • shouldn't there be rows every 12 columns? – niico Nov 06 '16 at 01:12
  • @niico not necessarily. it all depends on you and what you want to achieve at the end of the day. – Coding Enthusiast Nov 06 '16 at 06:38
  • thx. How would you do this if you want to put text in the squares (currently it makes the 'square' taller than it is wide if you add text to it) - I asked a question: http://stackoverflow.com/questions/40445364/responsive-squares-with-background-image-content-in-bootstrap-3-grid – niico Nov 06 '16 at 21:28
  • Would this answer change with bootstrap 4? – stevec Oct 11 '20 at 18:28