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!

About The Author: 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.

  • Matt Valvano

    Here is one of our latest responsive website builds

    Check it out!

  • Linn CoffeeIn

    good article, but i still can’t choose -row?or row-fluid?))))))

    • Matt Valvano

      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!

      • Linn CoffeeIn

        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

        • Matt Valvano

          Ditto, I will never miss anything below IE8.

          Speaking of @media styles I have some nifty tricks I should probably share them!

          • Linn CoffeeIn

            yes!, you should))) russian customers often require even ie7! developer’s hell! i use for ie …and i HATE IE!!)))