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