Nested rows with bootstrap grid system?

Question

I want 1 larger image with 4 smaller images in a 2x2 format like this:

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?

Slub

Please post the HTML/CSS that you have tried so far. – Drawers

Try this: jsfiddle.net/KXje2/9 I edited my fiddle to accommodate for large through extra small screens. – Dareen

Did the above code work for you?... – Dareen

Answer 1

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 | jsFiddle 4.0

Which will look like this (with a little bit of added styling):

Electromotor

sorry to hijack a 1 year old thread, but do you know how to get 0px between image and 1 and 3 – Midst

@alex, sure - just set margin: 0; on the .mini-box element. My example was just adding one for clarity, but you can just remove the line altogether. Here's a demo – Electromotor

why is there no row between col for minibox 2 and col for minibox 3? and what will happen if there is? – Kinlaw

@pashute, see Bootstrap 3 grid, does it really matter how many columns are in a row?. Each mini box takes up 50% of the available space (constrained by the column) so two will take up the first row. Any extra ones will just wrap down into a new line. You can also pair each of them in rows, but you don't need to. Bootstrap wraps by default so you don't have to clutter your markup with new rows. If it's semantically meaningful, I'd say go for it. But if you're just displaying a list of 4 objects, keep them in the same row. – Electromotor

OK thanks. I fiddled with the extra row and of course it worked exactly the same. Still seems to me a better idea to keep things explicit. – Kinlaw

Is that normal there is 4 elements with col-xs-6 in only 1 row ? – Beardsley

sorry for bringing this back to life again..but, how can I fit the height of the big box to the height of the combined small boxes? I was able to do it by using min-height and max-height, I wonder if there is/are more proper way/s – Grondin

@user3921890, that's too big a topic to answer in a comment line. Can you post a new thread explaining what you're trying to do and at least one attempt at doing it, and then link to that here. – Electromotor

Awesome! And this (apparently) is because "row" adds a margin of -10px counteracting the 10px margin added by the grid (ie. col-xs-6) – Quad

@Jordan.J.D - broke because of v4 since the libraries in the fiddle were pointed to the the dist/ channel. Updated with v3 libraries – Electromotor

@Jordan.J.D - added demos for v3.3.7 and v4.0 – Electromotor

What does mini-box do? – Statist

@AaronFranke, .mini-box is just there to apply some styling like height and background color to have parity to OP's question / grid layout. You can see the full code in the jsFiddle – Electromotor

Answer 2

Adding to what @KyleMit said, consider using:

• col-md-* classes for the larger outer columns
• col-xs-* classes for the smaller inner columns

This will be useful when you view the page on different screen sizes.

On a small screen, the wrapping of larger outer columns will then happen while maintaining the smaller inner columns, if possible

Bladdernut