Twitter Bootstrap 2 column Image Grid

Question

I want to create a 2 column image grid similar to this example. I'm looking for suggestions on how to best achieve this using the Twitter Bootstrap grid? I've attempted to do this with not much success. My main issues were the gutter between images being uneven, not being able to align the images on the center line of the page, and how to handle both portrait and landscape images. Thanks in advance.

Edit: As recommend I have supplied an example with a screenshot of the result.

 <div class="container">
  <div class="row">
    <div class="span12">
       <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
      </div>
    </div>
  </div>
</div>

The first row of span4's are perfectly aligned however, the bottom of the span4's in the second two rows are not aligning to the bottom of the span8 as the image illustrates.

enter image description here

-1 You'll get much more help if you can show what you've done so far. — Tieson T.

Richlewis Richlewis · Accepted Answer · 2012-12-20T08:24:19

Ok seems as if reading up upon nesting columns in bootstrap will help you on this one, what you are trying to achieve is relatively straight forward, just takes time to figure it out

http://twitter.github.com/bootstrap/scaffolding.html#responsive

I have tried this and it works, though you just need to put the appropriate images in their place as they are all different sizes

      <div class="container">
   <div class="row">
    <div class="span8">
     <img src="http://example">
    </div>

    <div class="span4">
         <img src="http://example">
    </div>
   </div><!--row-->
      </div><!--container-->

     <div class="container">
  <div class="row">
   <div class="span6">
    <img src="http://example">
   </div>
     <div class="row">
      <div class="span6">
    <img src="http://example">
      </div>
    </div><!--row-->
     <div class="span6">
      <img src="http://example">
    </div>
          </div><!--row-->
        </div><!--container-->

        <div class="container">
     <div class="row">
      <div class="span9">
    <img src="http://example">
      </div>
    <div class="span3">
     <img src="http://example">
    </div>
    <div class="row">
     <div class="span3">
      <img src="http://example">
     </div>
    </div><!--row-->
           </div><!--row-->
          </div><!--container-->

Twitter Bootstrap 2 column Image Grid

1 Answers