Eye Candy

Bootstrap 4 Grid PSD

by Alexander Rechsteiner - Updated

Gutter Columns

Note: There’s a version for Affinity Designer available here.

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 alpha 6
  • Non-artboard version for xl, that should work in older PS versions

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

Feature Details

Artboards

Artboards

Artboards were recently introduced in Photoshop CC and are very useful if you want to mockup your website for various screen sizes. I’ve added artboards for all Bootstrap breakpoints except xs. The reason that there is no artboard for xs is that on xs (or <576px screen size), the container width is set to auto and therefore the columns will be a different size, depending on the viewport width.

Shape objects for columns and gutters

Gutters and columns The main feature of any Bootstrap PSD Grid really. Both columns and gutters are embodied by vertical columns with the exact sizes that Bootstrap will later use when CSS classes such as col-md-5 are used.

Screen size helpers

Screen size helper When designing a website, it might also be useful to be aware of what area of your design will be visible at once. This is why I included rectangular shapes with the exact dimensions of the most commonly used screen resolutions.

Test images rendered in the browser

Browser test image

To ensure that the columns exactly match what effectively will be rendered in the browser, the PSD file contains test renderings for each screen size from a real browser.

#-tagged layers

Search Tags Here’s a nifty Photoshop cheat I learned recently: In order to change the color (or other shape attributes) of many objects scattered over a file, give them #tags and use the find-by-name function. Change one of them, and then use “Copy / Paste Shape Attributes” from the context menu to change all the others in the same way. This file has related objects tagged in a meaningful manner so colors and other attributes can be changed easily.

Huzzah! Your file is on the way.

Thanks for downloading this resource. Don't forget to share it with your friends.


We're planning some cool stuff for the future.
Join our free newsletter to receive note about our releases: