## Bootstrap Version 3.x

As always, read Bootstrap's great documentation:

**3.x Docs**: https://getbootstrap.com/docs/3.3/css/#grid-nesting

Make sure the parent level row is inside of a `.container` element.  Whenever you'd like to nest rows, just open up a new `.row` inside of your column.

Here's a simple layout to work from:



    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-6"><div class="mini-box">1</div></div>
                    <div class="col-xs-6"><div class="mini-box">2</div></div>
                    <div class="col-xs-6"><div class="mini-box">3</div></div>
                    <div class="col-xs-6"><div class="mini-box">4</div></div>
                </div>
            </div>
        </div>
    </div>

## Bootstrap Version 4.0

**4.0 Docs**: http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Here's an updated version for 4.0, but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature



    <div class="container">
      <div class="row">
        <div class="col big-box">
          image
        </div>
        
        <div class="col">
          <div class="row">
            <div class="col mini-box">1</div>
            <div class="col mini-box">2</div>
          </div>
          <div class="row">
            <div class="col mini-box">3</div>
            <div class="col mini-box">4</div>
          </div>
        </div>
        
      </div>
    </div>

### Demo in Fiddle [jsFiddle 3.x][fiddle-3.x] | [jsFiddle 4.0][fiddle-4.0]

Which will look like this (*with a little bit of added styling*):

![screenshot][screenshot]

[fiddle-3.x]: http://jsfiddle.net/KyleMit/fbtw6/
[fiddle-4.0]: http://jsfiddle.net/KyleMit/4bo2uxgs/

[screenshot]: http://i.imgur.com/y2kk0xi.png

I want 1 larger image with 4 smaller images in a 2x2 format like this: 

![Figure 1 Example][1]

My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect. 

However, this doesn't seem to be possible, or I am just not doing it correctly?


  [1]: http://i.stack.imgur.com/tdxuMm.png

Nested rows with bootstrap grid system?

I suggest looking reading up on how the [bootstrap grid][1] works and how you can nest rows within rows.

Here's a rough mockup of how you could acheive your design with bootstrap





    .mygrid {
      text-align: center;
    }
    .mygrid div {
      border: 1px solid grey;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <div class="container">
      <div class="mygrid">

        
        <div class="row">
          <div class="col-sm-2">
            <div class="row">1</div>
            <div class="row">2</div>
          </div>  
          <div class="col-sm-4">
            3<br/>
            3.5
          </div> 
          <div class="col-sm-2">
            <div class="row">4</div>
            <div class="row">5</div>
          </div>  
          <div class="col-sm-2">
            <div class="row">6</div>
            <div class="row">7</div>
          </div>  
          <div class="col-sm-2">
            <div class="row">8</div>
            <div class="row">9</div>
          </div>  
        </div>
        
        
        <div class="row">
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-8">10</div>
              <div class="col-sm-4">11</div>
            </div>
            <div class="row">
              <div class="col-sm-4">12</div>
              <div class="col-sm-8">13</div>            
            </div>
          </div>  
          <div class="col-sm-4">
            14<br/>
            14.5
          </div> 
          <div class="col-sm-2">
            <div class="row">15</div>
            <div class="row">16</div>
          </div> 

        </div>

      </div>
    </div>



I added the `.mygrid` class just to help set some styles on the grid, but it's not necessary.

[1]: http://getbootstrap.com/css/#grid

Here's the layout I want:

!![Layout](http://i.stack.imgur.com/3rcbU.png)

I'm having some trouble converting it into code. 

I've been thinking about bootstrap but I have elements that go across columns and rows and i'm just not sure how to code it and keep everything in the 6x4 grid I have created for the layout.

Another problem in this regard is the responsiveness. The boxes in the grid are supposed to stack when the viewport is made shorter. however this also creates problems when elements use a different number of columns.

Any ideas on how I should approach this?