Needless to say, Twitter Bootstrap is an extraordinary tool for creating responsive designs that scale to both desktop and mobile browsers. There are dozens of tutorials and examples to follow online, but the one thing that isn’t explained in detail is the difference between the row-fluid and row classes.
The way that the documentation explains it, row-fluid is made for fluid websites, but that’s not exactly true. What matters is that you are calling the responsive stylesheet. That’s what makes your design actually respond fluidly. But there is one big difference between using row and row-fluid that isn’t readily explained.
How And When To Use Twitter Bootstrap Row-Fluid And Row
If you dig into the code, you can see the one easy-to-find difference. Row-fluid uses percentage-based calculations on its child spans’ width. Row simply uses pixel-based calculations. So what’s the difference? Well both will still tile down the page, adjusting to the width of the browser as it shrinks or grows. But row-fluid will continuously try to resize, while row will shift down only after a certain width is reached.
My Personal Tip When Designing Responsive Sites
The most important thing to remember when designing a responsive website is to always keep the grid system underlying it in mind. Before any design, you should sketch out your grid layout first! It’s very similar to wireframing. Afterward, create a design and layer it on top. This guarantees a good underlying structure based on design principle.
For more information and examples, visit the Twitter Bootstrap website. Have fun!
We would love to see some of your own responsive design. Show us what you’ve done in the comments below!
Here is one of our latest responsive website builds http://rccf.com/
Check it out!
good article, but i still can’t choose -row?or row-fluid?))))))
Hey Linn,
I know and understand your pain. (Ha!)
Personally I would stick with using row-fluid 99.9% of the time. Since we have been building with bootstrap I have only used row, once. The only reason I ended up using it was due to the fact that the javascript code I wrote was not calling to the row-fluid properly.
Hope this helps!
thanks) i am always used row and added @media styles to my css. it was dirty hack fo ie in fact), but the current project i do with row-fluid
Ditto, I will never miss anything below IE8.
Speaking of @media styles I have some nifty tricks I should probably share them!
yes!, you should))) russian customers often require even ie7! developer’s hell! i use https://github.com/scottjehl/Respond for ie …and i HATE IE!!)))