Adobe Certified ExpertAdobe Certified Instructorapple-logo-whiteLeft ArrowRight ArrowLeft ArrowRight ArrowDan Rodney Logoshopping-cartFacebookLinkedInTwitterYouTubesubmenu-arrow-down

I couldn’t find a Bootstrap grid for Adobe XD that uses the layout grid feature and marks the midpoint of column gutters. So that’s why I made this grid template. I hope you like it!

Adobe XD Bootstrap 4 Template Screenshot

Free for commercial or personal use. Please tell others about this template, but send them to this webpage to get it. (Do not redistribute this template on any other website.)

What’s Included

The template contains artboards for the various device sizes in Bootstrap 4:

  • Extra Small Devices <576px (I used an iPhone SE size. There are layouts with 1 and 2 columns.)
  • Small Devices ≥576px
  • Medium Devices ≥768px
  • Large Devices ≥992px
  • Extra Large Devices ≥1200px

Tips for Using the File

  • To hide or show the column shading, hit Cmd–Shift–' (Mac) or Ctrl–Shift–'(Windows) for Show Layout Grid.
  • To hide or show the gutter divider guides, hide/show the layer named Col Divider Guides.

Tags: Bootstrap Adobe XD Web Design Design

Left Arrow Back to Blog