195

I'm trying to figure out how to do the following grid with Bootstrap.

I'm not sure how I'd create the box (number 1) that spans two rows. The boxes are generated programmatically in the order they are laid out. Box 1 is a welcome message.

enter image description here

Any ideas on the best way to go with this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
James Jeffery
  • 12,093
  • 19
  • 74
  • 108
  • 1
    http://twitter.github.io/bootstrap/scaffolding.html#gridSystem, You can nest the Bootstrap gridsystem. – TheHippo May 06 '13 at 00:00
  • 1
    So create 2 rows, rather than 3, nesting the 2 rows within the first row? This could be problematic when the boxes are generated programatically. – James Jeffery May 06 '13 at 00:11
  • 1
    No idea if it would work, but would adding the `pull-left` class to all the boxes work? it won't make box 1 the same height as 2 + 4, but it should allow it to work when you set the height. – Hailwood May 06 '13 at 00:39
  • Hailwood, put that as an answer if you can, if not I'll paste my code. It worked ... at least on Chrome. Need to test it in other browsers. – James Jeffery May 06 '13 at 00:47
  • @Hailwood infact, no pull left is needed. Just setting a height on the first element works. – James Jeffery May 06 '13 at 00:52
  • Any idea how is this done in Bootstrap 5.x? – NoChance Jul 12 '22 at 20:53

5 Answers5

192

For Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

For Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

See the demo on JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mastergalen
  • 4,289
  • 3
  • 31
  • 35
  • How would you make boxes four and five fill the row's height as box one grows? – Imran NZ Oct 20 '15 at 19:20
  • 2
    http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Mastergalen Oct 20 '15 at 22:56
  • This is example does not quite work, the first column's bottom edge is slightly misaligned with the rest. – JackKalish Feb 05 '16 at 16:15
  • This is a great answer, but what if box 5 needed to extend into row 3 as well, and more-so, dynamically? – Misha'el Feb 19 '16 at 02:12
  • @Misha'el That's pretty simple, just do what he did for for box 1 and apply it to box 3/5. There should be 3 columns of equal size, the one's on the outside would contain just 1 row, the one on the inside two rows. – Nathan Williams Mar 20 '17 at 03:48
  • how could we get 1 to be the same height as 2 & 4 without using line breaks - eg if we want it to be an image or rotating images? – niico Jul 09 '17 at 23:22
25

Like the comments suggest, the solution is to use nested spans/rows.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
disrvptor
  • 1,592
  • 12
  • 23
8
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
Ps Naidu
  • 103
  • 1
  • 5
4

I believe the part regarding how to span rows has been answered thoroughly (i.e. by nesting rows), but I also ran into the issue of my nested rows not filling their container. While flexbox and negative margins are an option, a much easier solution is to use the predefined h-50 class on the row containing boxes 2, 3, 4, and 5.

Note: I am using Bootstrap-4, I just wanted to share because I ran into the same problem and found this to be a more elegant solution :)

Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
Shareef Hadid
  • 103
  • 1
  • 7
0

The example below seemed to work. Just setting a height on the first element

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

I can't help but thinking it's the wrong use of a row though.

James Jeffery
  • 12,093
  • 19
  • 74
  • 108