Sketch App: Bootstrap 4 Grid

Oct 2020 Update:

  1. I have completely rebuilt this Sketch resource to more accurately reflect how Bootstrap works, especially with regards to .container elements. By adding five container options, the total number of artboard grids increased from 26 to 90.
  2. I have added Bootstrap grid examples for each .container element, similar to the official documentation. Additionally, I’ve added instructions to help you learn how Bootstrap grids work and how to get the most out of this Sketch resource.
  3. I’m currently building a much larger Bootstrap v5 Sketch resource with 4 gutter width options and over 500 (!!!) artboard grids that should release in early 2021. Be sure to subscribe by email below to get notified when I publish the new Bootstrap v5 update.
Bootstrap 4.5 Grid template by Duane Smith Design

Here’s a freebie for anyone designing responsive websites using Sketch app: a downloadable Bootstrap 4 responsive layout grid templates containing 26 viewports 18 viewports in five Bootstrap v4.5 .container options for a total of 90 artboard grids.

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≥576px0–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 examples 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 this form to get an instant download link, and subscribe to get notified of the new Bootstrap v5 resource coming soon!

Download Form

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

I occasionally send out an email newsletter with new FREE resources and 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.

My 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.

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.

28 people like this