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?

5 Answers
5

Leave a Reply

Your email address will not be published. Required fields are marked *