One step to any responsive web project is establishing the grid and breakpoints. But because Bootstrap describes its grid in dev-speak, UI designers who are using Bootstrap for the first time often find themselves asking

What are the exact column widths of the Bootstrap grid?

At the large devices (desktop) setting, Bootstrap's columns are technically 8.3% with a 15px padding on each side. In design-speak, that means that the width of each column is 67.5px with 30px gutters. 

Designing with half-pixels can cause fuzziness, so it may be natural to round the columns up to 68px (or down to 67px). But the resulting layout is 6px more wide (or narrow) than it should be. While that might be OK for some, it can cause confusion.

So we coded a blank Bootstrap grid and resized the browser to various sizes. And that's where we saw how it actually works: the columns alternate in the browser between 68px and 67px. 

Unfortunately, the automatic grid creators in design tools like Sketch 3, Photoshop CC, and Axure don't support varying column widths.

So we rolled our own, by hand - which is what we're sharing with you today. The next time you design for Bootstrap, you should be able to skip right to design with these starter files.

 

Who is Slide UX?

We're an Austin-based user-centered design firm founded to support the product teams and marketers who want to be sure their sites and mobile applications are useful, usable, good-looking, and optimized.

Our focus is on user interface design - iterative wireframing, rapid prototyping, and visual design - but we often begin a lot earlier, with generative user research, persona development, requirements definition, experience mapping, and information architecture. And we hang around to clean up the job with tasks like pattern library development, usability testing, and conversion optimization.

Want more good stuff? You should subscribe to Slide UX Quarterly.