12 column grid generator

by Alexander Rechsteiner - Last updated

Many Bootstrap websites start their life as a mockup in Photoshop. When designing for Bootstrap, it comes in handy to have the targeted column sizes available in some form, so objects and text can be aligned to the grid easily.

For Bootstrap 3, there’s a myriad of good templates, but for the upcoming Bootstrap 4 there is not much around yet. This is why I created this Bootstrap 4 Grid PSD as a foundation to quickly mockup a theme or website. Here’s a quick overview of the features I’ve included.

For a more detailed rundown, see further down.

Features

• Artboards for xl, lg, md and sm viewport sizes
• Shape objects for columns and gutters
• Screen size helpers for common screen sizes
• Test images rendered in an actual browser
• #-tagged layers to facilitate style changes
• Guides along the column borders
• Based on Bootstrap 4
• Non-artboard version for xl, that should work in older PS versions

This Photoshop file is free (as in free beer).

Download

Feature Details

Artboards

Artboards were recently introduced in P