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.
Fluid-only: http://jsfiddle.net/5JECu/
Fluid-responsive: http://jsfiddle.net/ZnEEa/
Fixed-only: http://jsfiddle.net/eterpstra/ZR4zz/3/
Fixed-responsive: http://jsfiddle.net/eterpstra/rdvaG/12/
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 and 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 . The proper fluid width example is .
When observing Twitter’s , 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.
great examples, thanks for taking the time
hi, nice article, I never cared about this issue… thank you
Simple and to the point, and covers what most other explanations think you know. Thank you.
Thanks for the post and stackoverflow answer.
Is there a way to “lock down” the fixed sizes? For instance, mine looks perfect at 1000px, but looks bad when it shrinks down. (That’s why I was using what I thought was a “fixed” layout.) Can you do that with bootstrap? (And sorry about resurrecting an old thread – but I couldn’t find an answer and yours seems to be the most definitive content on this subject.)
Eg: http://www.weather-explorer.com
Sounds like you want fixed, but not responsive. Do not use bootstrap-responsive.css (or the equivalent less files). You can test this out very quickly by commenting out the last two lines of bootstrap.min.css.
Awesome – thanks so much. It all makes sense now.
I’m going to reask the question on the original stack overflow so you can update the answer there, since that is pretty much the definitive knowledge base article on the subject. Maybe you can save some other poor souls a bunch of hours.
BTW – the bootstrap.min.css I was using only had one line, so that part didn’t work (might have been a self-build), but you nailed the problem and gave me the clue I needed. Thanks again.
Great Help! Appreciate.
Awesome! cleared my doubt about basics of responsive design. Now its easy to understand bootstrap. \o/
How to define height in twitter bootstrap layoug. suppose i need header height 20% , main content height 80%, 20% footer and left side bar 80% height.
Hi,
I’m almost getting there with your information. However, reading the docs on Twitter itself:
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Why do they have all 9 column examples for the basic grid html? In the text they talk about 12 column, but examples are all 9..
Kind regards,
Willem
Maybe the left navbar takes up 3, so there is only 9 left for the right side content? (Though I think any container can aslo be split into 12.)
Hi, can be ;-). You are right, anything can be split into 12, so my question is not that important. I do have an other question. Do you know why Twitter Bootstrap choose for a 940px width layout? In the internet I read mainly about 960px (for fixed width), but actually testing on different mobile phones 980px seems to fit the whole screen (no white space left and right). Any idea?
Kind regards,
Willem
Hi, if you have the time, would you be so kind to answer my question from 29 August? Thanks.
Willem-Siebe,
Unfortunately I cannot answer your question, as I do not know why they decided on 940px. Possibly to leave room for 10px gutters on each side (for a total of 960)?
This article is becoming obsolete with Bootstrap 3. There is no longer any fixed grid in version three – it is all fluid now.
I have noticed you don’t monetize your website, don’t waste your traffic, you can earn additional cash
every month because you’ve got hi quality content. If
you want to know how to make extra bucks, search for:
best adsense alternative Wrastain’s tools