Oct 2020 Update:
- 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.
- 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.
- 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.
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 Large||Large||Medium||Small||Extra Small|
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!
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.