I've designing for web since 2006 and I waste a lot of time ignoring things like bootstrap. I understand how grids, and the specific bootstrap, work but I have a theoretical question about it.

How do I take a decision like the width of a element (considering gutters) in design step when drawing in the Sketch app (or other software)?

For example:


I can't handle this without struggling with the bootstrap grid system. This problem completely dissolves when I'm directly designing in a browser but it persists when I'm on a graphic software like Sketch or Photoshop.

  • 4
    English may not be your first language and there's nothing wrong with that! Seeing as we are all designers, it's safe to say the one language we all speak is visuals. It would really help us to understand your problem, if you uploaded some examples of what you mean
    – Manly
    Apr 18, 2018 at 19:44
  • Like, having a grid as an overlay? I'm not sure what your question is exactly other than "How do I determine the width of an object, and how does this translate into a Bootstrap grid?" If so, this article probably will help » medium.com/@petehouston/…
    – spjpgrd
    Apr 18, 2018 at 20:16

1 Answer 1


Bootstrap is a simple 12 column grid.

How you configure that in design software depends entirely on the width you want to design at. Essentially create a new document and set up 12 column guides.

For Photoshop, you can use View > New Guide Layout and merely choose the default "12 Column" from the drop down menu:

enter image description here

I, personally prefer to remove the padding for the columns and add a page margin:

enter image description here

This, for me, gives me a decent indication of the break points.

(I don't use Sketch, can't comment there)

Disclosure: I don't create full page designs in graphic software to directly export to markup. I use graphic software to explore via mockups or wireframes, but I'm never seeking any sort of pixel-perfect representation of HTML. I learned long ago, that can be more trouble than its worth. These sort of setups, for me, are more along the lines of "sketches" as opposed to "comprehensives".

I build "comps" in browser with a text editor.
This tends to be more true due to responsiveness and any design at 1000px wide isn't going to be the same design at 1200px or 700px wide. So, spending a lot of time fleshing out one width in graphics software can be wasted overall.

I'd also point out that Bootstrap, in itself, is a great tool. However, it really does a lot of "designing" for you. If you are more interested in the responsiveness without the design aspects, you might look into Zurb Foundation - All the responsiveness benefits without having to scour CSS files to override a button color or something along those lines.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.