Sketch App: Bootstrap 5 Grid

Here’s a freebie for anyone designing responsive websites using Sketch: a FREE Bootstrap 5 responsive layout grid template with 4 gutter width options and over 500 artboard grids.

Screenshot of Bootstrap 5 Grid template by Duane Smith Design

Bootstrap is the world’s most popular framework for building responsive, mobile-first websites. Layout Grids in Sketch can be set up to follow the Bootstrap fixed-width gutter and flexible-width column conventions, but the Layout Settings behavior can be difficult to understand.

I’ve done all the tedius layout grid work for you: setting up artboards, performing grid calculations, rounding to whole pixels, pulling ruler guides, documenting measurements, and repeating everything for multiple .container and gutter options.

That means you can simply pick-and-choose the Artboards with Layout Grids you want to use and start designing your next project.

There are 22 different artboards with 6 container options in 4 gutter widths for a total of 528 artboards to choose from. There are three steps for narrowing down the options to your exact needs:

  1. Choose a gutter width
  2. Choose a container
  3. Choose an artboard from each breakpoint

Also included are full instructions on how to use this file:

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.