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
?
Rows must always be placed inside of a container. Rows span the width of the container. They have a negative 15 pixel margin at the end, essentially removing the 15 pixel margin set by its container. This is because the columns each have a 15 pixel margin of their own that replaces the container's margin.
container-fluid: The . container-fluid class provides a full-width container which spans the entire width of the viewport. In the below example, the div with class “container-fluid” will take up the complete width of the viewport and will expand or shrink whenever the viewport is resized.
If it is important that the content stretch the full width of the browser window at all widths, then use the container-fluid class. On the other hand, sometimes it is desirable to use container in order to minimize the points at which the design 'reflows' due to the browser width.
How does Bootstrap work? To align and layout, the Bootstrap grid system uses a series of containers, rows, and columns. This grid system supports a max value of 12 columns. Anything after the 12th column will be shifted to a new line.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With