👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Bootstrap Grid Layout Symbol Library

· Posted by Mike in Products and tagged , , · 2 Comments

This is a Symbol library with a set of grid layouts using the Bootstrap framework. The different layouts correspond to min-width and max-width media queries for different viewport dimensions, to help people doing responsive layout wireframes.

Toggling Markup visibility (CTRL+K/CMD+K) hides columns, notes, and top bar to reveal only the square rectangle of the viewport.

To use as a symbol, click the Download BMML link under the Mockup on the page above and save to one of your assets folders to use as a Symbols library, or you can download the BMML file directly from here:

https://mockupstogo.mybalsamiq.com/projects/layout/Bootstrap+Grid+Layout.bmml

In case you're unfamiliar with Symbols, they are re-usable components that you can customize. You can find documentation and tutorial for using Symbols here. A tutorial for using this symbol library is forthcoming.

Mike for the Balsamiq Team

Leave a Comment

Comments (2)

  1. Hi, Eric. I think you’ll find a lot of articles about designing with Grid layout systems for web design if you Google for them, but they’ll be about visual design or front end development, rather than wireframing with a tool like Mockups.

  2. Do you know of any good articles or tutorials that describe how to use grid layouts when designing mockups?