Sketch App: Bootstrap 4 Grid

Bootstrap 4 Grid template by Duane Smith

Here’s a freebie for anyone designing responsive websites using Sketch app: a downloadable Bootstrap 4 responsive layout grid templates containing 26 viewports.

The artboards match Bootstrap naming conventions (similar to t-shirt sizes) of Extra Large (xl), Large (lg), Medium (md), Small (sm), and Extra Small (XS) with default breakpoints:

Extra LargeLargeMediumSmallExtra Small
≥1200px≥992px≥768px≥576px<576px

In Bootstrap, gutters are fixed-width and columns are flexible-width. Gutter width is 30px across all breakpoints (15px on each side of a column). As browser widths change, gutter widths remain the same; it is the column widths that change instead, allowing for flexible content as shown on the common use case page in the Sketch file:

Each artboard contains guides on both the sides and center points of gutters, which show/hide with the Rulers using a keystroke (control–R). Columns are controlled using Layout Settings (View > Canvas > Layout Settings) and they too can show/hide using a keystroke (control-L). You can also edit the columns in Layout Settings if you want to use a different gutter width than 30px, although you will have to manually edit the guides.

Fill out the Download Form below to get an instant download link. If you like this resource, be sure to click the smiley face below!

Terms

By submitting the download form, you agree that downloading is entirely at your own risk. This free download is provided “as-is” without any warranty, either expressly or implied. You may use this download in personal or commercial work. You may not redistribute or sell this download.

Download Form

But before you fill out this form…I’d like to earn your subscription.

Once a quarter, I send out an email newsleter with every new FREE resource and blog post I’ve published, along with links I feel are worthy of sharing. Topics include UX, UI, Digital Product Strategy, Web design, App design, Logo design, and the business of design.

The newsletter is informational only, so I don’t push any products or services in it. I respect your privacy and won’t share your information with anyone else. I hate spam just as much as you do.

This industry is full of bullshit; my newsletter aims to cut through it. If that sounds like something you’d be interested in, make sure the “yes” checkbox is selected below. And if you don’t find it valuable, you can always unsubscribe at any time.