I’m a big fan of Stack Overflow and use it on nearly a daily basis for reference. Once in a while I’ll post or answer a question. Recently, an answer of mine regarding responsive design in the context of Twitter Bootstrap has gotten a lot of attention. Just for kicks, I’m cleaning up the conversation and posting the meat and potatoes here.
Here are some jsFiddles to demonstrate the difference between fluid only and fluid + responsive.
In the fixed width layout, the columns change when the browser window reaches a width defined in a media query. So when you have your window greater than 960px wide, it will stay at it’s maximum width. Then when you shrink your browser to 959px, it will snap to a new layout based on a media query that has a maximum width of 768px. So because you are viewing a fixed-width layout, the columns will not change when your browser width is between 768 and 960. Wen you are viewing a fluid-width layout, the column sizes will always change to match your browser’s width. The layout itself will also change in accordance to the media queries, as with a fixed-width layout.
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. In other words, the Scoaffolding 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 Twitter’s 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.
When creating rows, be sure to use
with a fixed width layout, and
with a fluid width. Do not mix and match (unless you have a very good reason to do this).
I can’t tell what the difference is between twitter bootstrap fluid responsive vs non-responsive though… (asked by original poster)
Open the fluid example and maximize your window. Observe how the navigation menu is a horizontal list. Now slowly reduce the width of your browser. At some point, the navigation bar will change so that a button appears, and when the button is clicked, the menu appears as vertical. So with fluid, the only thing that changes is the width of the elements. With a responsive design, you can change any css rule based on the width of the browser. See my edited answer for some jsFiddle examples.