Balsamiq Community Discussion

How to map mockup with Bootstrap


Hi there,

this article describes that mockups can be mapped to an UI template like Bootstrap. But I don’t know how.
In my case I created my UI with the Sketch skin of Balsamiq. And now, afterwards, I would like to map it to Bootstrap.
But how I map e.g. a button to bs-btn-sm-primary? Of course, the Bootstrap UI Template is already imported to my Symbol Library.

At the end I want to come (sticking to the example in the article) from this

to this

I would appreciate any help.


Hi @maboo, thanks for your question. I think I understand your confusion. There is no way to take your mockup straight to code. You can’t export what you have done and end up with the Bootstrap HTML.

Think of Balsamiq Mockups as similar to sketching on a piece of paper with a Sharpie. The goal is to make it so that you can sketch quickly and efficiently so that you can come up with multiple iterations of your design, and not feel bad about throwing away the ones that don’t work. Then you can move on to coding, knowing that your interactions and UX design are solid.

Hopefully that helps clear things up a bit. Cheers!


Thanks for your reply and clarification. I “read” that I can import a pattern template, map the elements and then just switch to the wirefame skin and all looks pretty with Bootstrap elements :smile: