Complex bootstrap spanning grid

Question

Got a headache with complex spanning grid using bootstrap.

There are portrait and landscape blocs into 5 columns but they all have the same surface except the bloc number 1 that only got the same width.

It become complex when two portrait blocs shares the same row. Moving content with margin, is not suitable.

enter image description here

possible duplicate of [Bootstrap Box Spanning Multiple Rows](http://stackoverflow.com/questions/16390370/bootstrap-box-spanning-multiple-rows) — Mark Silverberg, Sep 10 '14 at 00:17
On your link, if cell number 5 is higher and take 2 columns, how the next row will be collaps the like numbers 5/6 on mine — Bastien Bonhoure, Sep 10 '14 at 00:33

Hassene Benammou · Answer 1 · 2014-09-10T07:43:10.073

here you go: this is the fiddle Demo

<div class="row-fluid">
    <div class="span4">
        <div class="well">1<br/><br/><br/><br/><br/></div>
        <div class="well">5</div>
    </div>
    <div class="span8">
            <div class="span12"><div class="well">2</div></div>
        <div class="row-fluid">
            <div class="span8">
                <div class="well">3</div>
                <div class="well">6</div>
            </div>
            <div class="span4"><div class="well">4<br/><br/><br/><br/><br/></div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span2">
        <div class="well">7<br/><br/><br/><br/><br/></div>
        <div class="well">14<br/><br/><br/><br/><br/></div>
    </div>
    <div class="span10">
        <div class="row-fluid">
            <div class="span6">
                <div class="well">8</div>
            </div>
            <div class="span6">
                <div class="well">9</div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <div class="well">
                    10<br/><br/><br/><br/><br/>
                </div>
            </div>
            <div class="span6">
                <div class="well">11</div>
                <div class="well">12</div>
            </div>
            <div class="span3">
                <div class="well">
                    13<br/><br/><br/><br/><br/>
                </div>
            </div>
        </div>
         <div class="row-fluid">
             <div class="span6">
                <div class="well">15</div>
            </div>
             <div class="span6">
             <div class="well">16</div>
            </div>
        </div>

    </div>
</div>

you are not completely free on the panel sizes using span, if you want a more precise result you should use custom percentages on the div width.

Complex bootstrap spanning grid

1 Answers1