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
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.
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.
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!