Search code examples
csstwitter-bootstrapgrid-layout

Achieving a complex grid in bootstrap

Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!

I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.

Grid:

enter image description here

Solution

  • Use nested blocks whenever you need your grid to span several rows. Something like this:

    <div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>        
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="row">
            <div class="col-sm-8"></div>
            <div class="col-sm-4"></div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8"></div>
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>

    Then you can set the height for your blocks and your grid is good to go.