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!

Join the discussion 6 Comments

Leave a Reply

Matt Valvano

Author Matt Valvano

Matt has a very extensive experience of print and web design. He is an effective team player known for creativity, flexibility, distributing skills, managing, working with others and producing high quality, effective works of art within a deadline.

More posts by Matt Valvano

Join the discussion 6 Comments

Leave a Reply