Is it possible to have a fluid-width page without the left-hand sidebar in Twitter Bootstrap?

Question

I am doing a CV page using Twitter Bootstrap and I want it to have both fluid layout and responsive layout. Here is the page .

Here is the code:

<div class="container-fluid">
<div class="row-fluid">
    <div class="row-fluid span7">
        <div class="span2">
            <img src="assets/img/scelta1.jpg" class="thumbnail pull-left"/>
        </div>
        <div class="hero-unit span5">
            <h1>Fabrizio Bianchi</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non urna ut nisl rhoncus gravida. 
            Morbi placerat libero at lectus gravida suscipit. Nam hendrerit dolor ut lacus euismod scelerisque. 
            Etiam vitae congue risus. Quisque vitae mattis mi. Nulla sed tristique felis. Mauris scelerisque augue a nunc aliquet consequat.
            </p>
        </div>
    </div>
        <div class="span5">
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 80%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 60%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 90%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress">
                <div class="bar" style="width: 70%"></div>
            </div>
        </div>

    </div>
</div>

The problem, as you can see, is that when I try to make a nested fluid grid for the first 2 elements they get both moved to the left with a big space left between them and the third element of the row (the skill part).

Looking at the documentation I think this maybe due to the fact that the fluid layout contains a left-hand sidebar by default and my nested grid is treated as such. Is it so? In that case how do I get rid of it?

Answer 1

The fluid grid is based on percentages, which means it takes XX% width of the first " relative " parent.

In other termes, each .row-fluid nesting creates a new .span12 row, which you can divide in 12 spans any way you want.

So you have to get your spans to add up to 12 in order to fill the row :

 <div class="row-fluid span7">
     <div class="span2">
        <!-- ... -->
     </div>
    <div class="hero-unit span10">
        <!-- ... -->
    </div>
</div>

This is the main difference between the normal grid and the fluid grid.