Using the Bootstrap Grid with Photoshop Templates

If you are using my free Bootstrap Photoshop template for the first time, you may have questions about exactly how it fits into the Bootstrap grid system. Totally fair. In fact, I got this email just the other day:

I am new to designing responsive sites so this may come across as a very dumb question… Your template has an outer container (yellow) and inner columns (red). When I’m creating my mockup in PhotoShop, should I create it at the full width of the yellow container (1170px wide) or is the width of the red columns really my max width (1110px) I get confused if I’m allowed to include those outer column margins when designing the graphical header of my site, for instance.

That is totally understandable and let me explain.

Before we jump in

The Bootstrap grid is intrinsically different than any static grid system you could setup in Photoshop. So it is important to consider my template as a guide or starting point. It’s a great way to mockup a page and send it to developers who will understand how many columns wide each section should be… even if it is not pixel-perfect (don’t get me started on a pixel-perfect web).

It is also worth understanding how Bootstrap calculates the grid since it is more complex than the pixel-width grid systems of old.

The short answer

The short answer is that you can go up to 1170px for your layout, but you can only go up to 1140px on your content. Bootstrap adds “1/2 of the column width” (15px) to each side of each column in padding.

The real answer

It’s actually a much more complicated answer than that. I would recommend you use your browser’s “inspector” tool to see the layouts on some of the Bootstrap template examples:

Also note that your developers can change the column and gutter sizes quickly and easily using LESS or SASS variables inside Bootstrap. This allows you to create completely customizable grid sizes if you want.

Click to enlarge

Click to enlarge

For example, looking at the Jumbotron example page (above):

  • The “container” is 1170px but it has padding of 15px on each side making the content inside the container only 1140px.
  • The “row” inside the container is 100% wide but is also has a “negative margin” of 15px (-15px) on each side which extends it back out to 1170px wide.
  • Each “column” inside the row has 15px of padding on each side. That means a full-size “col-lg-12” column is 1170px wide with 15px of padding on each side so the content (text) inside that column will be 1140px wide.