Question

I am working with a fluid-responsive bootstrap project. I have four spans; my goal is to show them 4×1, then 2×2, followed by 1×4. I am having trouble doing this without transitioning through 3×1+1.

To show that graphically:

The only code I’ve found that works is below; in the 4×1 layout, it leaves a wide space between items 2 and 3.

<div class="container-fluid">
    <div class="span11">
        <div class="span5">
            <h2>Item 1</h2>
        </div>
        <div class="span5">
            <h2>Item 2</h2>
        </div>
    </div>
    <div class="span11">
        <div class="span5">
            <h2>Item 3</h2>
        </div>
        <div class="span5">
            <h2>Item 4</h2>
        </div>
    </div>
</div>

Answer 1

The default bootstrap grid is 12 columns. Did you customize? If so, share that code. Even if you did customize and are using an 11 column grid (which seems like a bad idea by the way) you are only using spans adding up to 10 inside of an 11 column container.

In the fluid grid for bootstrap here is the proper way to nest spans:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span6"></div>
                <div class="span6"></div>
            </div>
        </div>
    </div>
</div>

The key here being that when you nest, you need to open up a new row-fluid div. In your case, if you only care about the two boxes then you can just do those .spans from the first row-fluid div and not even specify the span class for the full amount. Also, remember to make your inner span classes on each row add up to the total number of columns