title: Responsive Grid of Squares in Bootstrap
body: <p>I want to create a grid of responsive images that are always squared in Bootstrap.</p>
  
  <p>So far I got this: <a href="http://jsfiddle.net/78tf3px2/1/" rel="noreferrer">Jsfiddle Link</a></p>
  
  <p>This part forces the elements to be squared all the time:</p>
  
  <pre><code>.frontpage_square {
      position:relative;
      overflow:hidden;
      padding-bottom:100%;
  }
  
  .frontpage_square img {
      position:absolute;
  }
  </code></pre>
  
  <p>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.</p>