Adobe Certified Expertapple-logo-whiteLeft ArrowRight ArrowLeft ArrowRight ArrowDan Rodney Logoshopping-cartFacebookLinkedInTwitterYouTubesubmenu-arrow-down
UPDATE: This grid is for Bootstrap 4. See my new Bootstrap 5 template.

I found that most of the Bootstrap grids for Sketch did not use Sketch’s Show Layout (Ctrl–L) or don’t mark the midpoint of column gutters, so that’s why I made this grid template. I hope you like it!

Sketch Bootstrap 4 Template Screenshot

Free for commercial or personal use. Please tell others about this template, but send them to this webpage to get it. (Do not redistribute this template on any other website.)

What’s Included

The template contains artboards for the various device sizes in Bootstrap 4:

  • Extra Small Devices <576px (I used an iPhone SE size. There are layouts with 1 and 2 columns.)
  • Small Devices ≥576px
  • Medium Devices ≥768px
  • Large Devices ≥992px
  • Extra Large Devices ≥1200px

Tips for Using the File

  • To hide or show the column shading, hit Ctrl–L for Show Layout.
  • To hide or show the column and gutter guides, hit Ctrl–R for Show Rulers.

Video Demo

Subscribe to my YouTube Channel

Tags: Bootstrap Sketch Web Design Design Video

Left Arrow Back to Blog

Follow @danrodneytweets or subscribe to my RSS feed for updates.