Bootstrap 4 Grid Template for Sketch Tutorial


Hi, I’m Dan Rodney. When designing
responsive websites we often like to design on a grid system and Bootstrap is
the most popular one. I couldn’t find a Bootstrap grid template that was built
properly using Sketch’s layout and ruler guides, so I made one myself
I have versions for Bootstrap 3 and 4. Here I’ll be showing the latest one for
Bootstrap 4. They are available as a free download on my website. The links are in the video description below if you’re not watching this video on my website.
I’ve included artboards for all the sizes in Bootstrap 4: extra small, small,
medium, large, and extra large. For the mobile phone sizes I used an iPhone SE
size. I included 1 and 2 column layouts and you can use whichever you prefer. To
use this file, here’s a few things you should know. To show or hide the gray
column guides, choose “Show Layout” or hit Ctrl-L. To show or hide the red gutter
midpoint guides, choose “Show Rulers” or hit Ctrl-R. Content such as text should
be contained within the gray column guides leaving an empty gutter space
between the columns. Column backgrounds such as the blue and orange backgrounds,
can meet in the middle of the gutter. So it’s important to know the midpoint. The
templates I was finding didn’t mark this, probably because Sketch doesn’t create
these guides automatically. I had to create each guide manually. I’ll end on a
tip for using Sketch when the gray layout guides are visible, Sketch doesn’t
want to snap to the red ruler guides. So hide the layout guides and you’ll be
able to snap to the red guides as expected. I hope you like this template,
and please subscribe to my YouTube channel for more tips, tricks, and tutorials.

14 comments

  • Đại Phong

    This is exactly what I am looking for. Thank you so much!

    Reply
  • Joseph Lei

    I downloaded this Sketch 4 template but the columns aren't showing. CTRL + L doesn't work. Using latest Sketch version.

    Reply
  • Dwi Priyatmoko

    good stuff bro, btw how if we want to enlarge our canvas size? how to arrange grid guide centered the canvaz?

    Reply
  • XPL0RR

    Thanks. I had to fix the grid on 2 column x-small

    Reply
  • wilson parry

    Hi Dan, I was played around with this but could not figure out how to give padding to either side. Is there any hack for this besides drawing a rectangle? In particular I'm looking to make a 640 x 640 artboard with grid like either of these: http://gridcalculator.dk/#/640/5/20/20 OR http://gridcalculator.dk/#/640/4/20/20 Any suggestion would be great, thanks.

    Reply
  • Emil Čupić

    thank you!!

    Reply
  • viery365

    Thank you ! Thank you!!

    Reply
  • Fedecki

    Many thanks !

    Reply
  • Mike Writing

    Thanks for this!

    Reply
  • rahma hanifah

    Thank you, Dan!

    Reply
  • MC YouTube

    Hey Dan, thanks for the grids, definitely handy to have the rulers in there. But shouldn't the extra large be set to 1170 instead of 1140? Assuming it's setup for ≥1200px

    Reply
  • David Kopp

    This is excellent thank you! When I downloaded and opened in Sketch 51.2 I saw no gridlines and both 'Show Grid' and 'Show Layout' were greyed out. Any suggestions? Thanks!

    Reply
  • Danny

    Thank you very much for this!

    Reply
  • Tobi Amodu

    Thank you Dan!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *