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

Add a Comment

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