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.