Is it ok to have a row-fluid inside a row?

Question

I've been playing with the Twitter Bootstrap grid system , and noticed that I could mix row and row-fluid in the following way:

<div class="row">
    <div class="span8">
        ...
    </div>

    <div class="span4>
        <div class="row-fluid">
            <div class="span8">
                ...
            </div>
            <div class="span4">
                ...
            </div>
        </div>
    </div>
</div>

That works for me, however I'm not sure if I can rely on this behaviour to stay consistent. If find the documentation to be unclear on this subject.

Is this a documented, and reliable, use of the grid system? Or should I only use row-fluid inside another row-fluid ?

Answer 1

The main purposes of .row-fluid is to alter the styling of .spanX elements.

Within .row , .spanX elements have a fixed pixel width. This width may change based on viewport dimensions if you're using the responsive stylesheet.

Within .row-fluid , however, .spanX elements have a percentage-based width. One of the nice side effects here is that a .row-fluid element can be placed inside any element, and it will simply size itself to 100% of the container's width. Likewise, any .spanX elements within this fluid row will size themselves accordingly, so that each 'column' is roughly one 12th (accounting for gutter width) of the .row-fluid container, regardless of the row's width or location in the DOM.

If there is any area of your page that you want to split into some set number of columns, .row-fluid can be used.

Answer 2

Yes, it's reliable and documented. Take a look at Basic fluid grid HTML section on th documentation. As you will see you can:

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

It means that you can use this component anywhere in your layout, doesn't matter if it's fluid or not. You will note also that "Fluid layout" section is completely separated from this one.

Answer 3

Yes you can use the row and row-fluid in this way. If you are using bootstrap-responsive.css also then when the browser is re-sized or the page is viewed on mobile devices the grid sizes are altered to fit.