Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
I'm getting confused about the various options in the twitter bootstrap grid, and how they go together.
To begin with, you can have an ordinary fixed container, or a container-fluid.
Then either one can include either an ordinary row, or a fluid row, row-fluid. That is, you can have a fixed container with a fluid row, or a container-fluid... with a fixed row?
Then on top of that, you can include the 'responsive' media queries, or not.
I am getting confused as to how these things interact. But let's start with one obvious example.
On the examples page itself, there's what's presented as an example of both a fixed grid and a fluid grid
However, in my browser, on that example page itself -- both grids behave identically. Perhaps because the example page uses the optional responsive media queries? In both grid examples, if I start gradually narrowing my browser window, the grid elements do not get gradually narrower -- once a certain (responsive) boundary width is reached, they snap to a smaller size, and again at further boundary widths. But both the ordinary 'fixed' example AND the 'fluid' example behave exactly the same here -- so what the heck is the difference?
Answer
When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. Generally, you want to pick one or the other, but not both. The examples you listed in your question are, in-fact, in the same fixed-width page. In other words, the Scaffolding page is using a fixed-width layout. The fixed grid and fluid grid on the Scaffolding page are not meant to be examples, but rather the documentation for implementing fixed and fluid width layouts.
The proper fixed width example is here. The proper fluid width example is here.
When observing the fixed width example, you should not see the content changing sizes when your browser is greater than 960px wide. This is the maximum (fixed) width of the page. Media queries in a fixed-width design will designate the minimum widths for particular styles. You will see this in action when you shrink your browser window and see the layout snap to a different size.
Conversely, the fluid-width layout will always stretch to fit your browser window, no matter how wide it gets. The media queries indicate when the styles change, but the width of containers are always a percentage of your browser window (rather than a fixed number of pixels).
The 'responsive' media queries are all ready to go. You just need to decide if you want to use a fixed width or fluid width layout for your page.
Previously, in bootstrap 2, you had to use row-fluid inside a fluid container and row inside a fixed container. With the introduction of bootstrap 3, row-fluid was removed, do no longer use it.
EDIT: As per the comments, some jsFiddles for:
- fluid non-responsive layout,
- fluid responsive layout,
- fixed non-responsive layout,
- fixed responsive layout.
These fiddles are completely Bootstrap-free, based on pure CSS media queries, which makes them a good starting point, for anyone willing to craft similar solution without using Twitter Bootstrap.