Achieving a complex grid in bootstrap

Question

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:

Answer 1

A newbie here. So I was learning to make nested grids when I stumble on this question.

My Rules for making nested grids:

1.The entire grid will be in parent container .row (parent wrapper) 2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:

<div class='col-md-12'>
    <div class='row'>This is the column wrapper.
           <div class='col-md-9'></div>
           <div class='col-md-3'></div>
        </div>
</div>

3.Breakpoints are very key 4.You may have to use custom css to fine tune your grid.

This is my solution to the problem:

  <div class='row parent-wrap'>
        <div class='col-sm-6 big-left'>Top Left big</div>
        <div class='col-sm-6 quarter-grid'>
            <div class='row top-wrap'>
            <div class='col-sm-6 top-left'>top-left</div>
            <div class='col-sm-6 top-right'>top-right</div>
         <div class='col-sm-6 bottom-left'>bottom-left</div>
       <div class='col-sm-6 bottom-right'>bottom-right</div>
            </div>
        </div>

        <div class='col-sm-12'>
            <div class='row mid-wrap'>
          <div class='col-sm-3 mid-start'>mid-start</div>
        <div class='col-sm-6 mid-center'>mid-center</div>
        <div class='col-sm-3 mid-end'>mid-end</div>
        </div>

    <div class='col-sm-9'>
        <div class='row bottom-wrap'>
       <div class='col-sm-8 bottom-start'>bottom-start</div>
     <div class='col-sm-4 bottom-center'>bottom-center</div> 
        </div>
    </div>

</div>

Rudimentary custom css:

 .parent-wrap{
        margin:100px;
    }

    .big-left{
        background-color: aqua;
        height:300px;
    }
    .top-left{
        background-color:black;
        height:150px;
    }
    .top-right{
        background-color: blue;
        height:150px;
    }
    .bottom-left{
        background-color:brown;
        height:150px;
    }
    .bottom-right{
        background-color:crimson;
        height:150;
    }
    .mid-start{
        background-color:grey;
        height:200px;
    }
    .mid-center{
        background-color: red;
        height:200px;
    }
    .mid-end{
        background-color: pink;
        height:400px;
    }
    .bottom-start{
        background-color:blueviolet;
        margin-left:-15px;
        height:200px;
        margin-top:-200px;
    }
    .bottom-center{
        background-color:burlywood;
        height:200px;
        margin-top:-200px;
    }

Answer 2

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.