We'll remember your contact info. for this session.

Bootstrap

Symbols of the controls for the Bootstrap library made by Twitter.

More info about Bootstrap at http://twitter.github.com/bootstrap/components.html

Comments (45)

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Michael, this looks great. I'll start playing with it and get you some feedback. thanks very much for your time and help.

Rafael

Rafael replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Really cool!

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Great Job!!

Thank you very much!

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Amazing.

Paul

Paul replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

GREATNESS!

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Awesome! :)

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Just when I thought I had it all....marvelous!

@SharePointOscar

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Thanks!

Casey

Casey replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Awesome! Can we use this in the hosted version, MyBalsamiq?

Casey

Casey replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Nevermind I think I figured it out!

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

To answer Casey's question, in case anyone else sees it later, yes you can use in myBalsamiq. You have to save this to your Site or Project assets. More info about assets in the docs here: http://support.balsamiq.com/customer/portal/articles/112403

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

How does this work? On the entire site nowhere it is explained what Balsamiq generates. Does it give me a UI that my users can click on and experiment or does it create only images? You may have a great product but there's no "What is Balsamiq" page that explains what it does and how it differs from other possible competitors. For example, I use a tool to do mockups that are a million times better looking than Balsamiq's. However, if Balsamiq mockups are interactable, then I'll switch. Please describe more. Not all people can download demos at work.

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi, Kalidas. I'm guessing that you came to Mockups to Go directly, but missed our main site. The gist is that we make a tool for rapid sketch-style wireframing.

Here's where you can go to find out what Mockups is all about:

Balsamiq.com - Our main site. There is a little info at the top about what we do.

Mockups Product Page - Shows you what Mockups lets you do.

Finally we talk about the philosophy of the product in our Mockups Manifesto. Our stance is that we're really barely more powerful than pencil and paper. We try to achieve the same speed and simplicity of a pencil, so we need to keep the tool simple.

We know some of the design properties can seem limited when compared with many other applications, but we're focussed on optimizing around fast design decisions and iterations, and feel that leaving visual design out as much as possible is actually the app's strength.

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Sorry, here's the correct url for the Manifesto: http://www.balsamiq.com/products/mockups/manifesto

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Can these user created controls work dynamically in the same way as the default Balsamiq controls?

Example:
If I add a default Tabs Bar, double click to edit, and write in 4 more lines of text, the tool will create 4 more tabs along the bar.
But when I use the Bootstrap tab bar, I cannot add or customise the tabs beyond the default 4 tabs in the symbol created. I can alter the tab text but cannot add more tabs or alter the tab text with the same text editor panel that pops up when editing the default Tabs Bar.

The same applies for the default ComboBox; I can add items to the dropdown, display it open/closed. But the Action/ComboBox symbol in the Bootstrap assets cannot do this.

Have I got the wrong idea of what I can do with MockupsToGo?

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi, Josh. This library was created for people who want to mimic the visual design of Bootstrap closely, so some of its controls don't behave the way normal controls do.

Some of the controls are created by combining simple container and text objects. This is the problem when Libraries stray from the default UI Library to look more like a certain visual design. Mockups isn't made for that, so there are some compromises.

That tab control, for instance, is a hack. It uses a combination of geometric shapes rather than the Tab control from the regular UI Library, so it doesn't function like a regular tab. You'll have to edit that manually.

Same is true for the dropdown created here. To show the dropped down menu items, you might just use menu list.

If you aren't concerned about visual design issues, you might be better off just using the regular tab and combobox elements from the UI Library rather than using the ones in the Bootstrap library.

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Ok, makes sense thanks.
Yes I will stick with the regular Library tools then. I was under the impression these were alternate UI options with the same functionality as the default Library tools! (I also didn't realise Bootstrap was a product in itself).

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Bootstrap is a library that uses a few different frameworks for creating web apps and sites. More info from the Twitter Bootstrap site here: http://twitter.github.com/bootstrap/components.html

Kristian

Kristian replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Definitely trying this, looks great. Thanks dude

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

You are my hero! :) Many thanks for this

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Any thoughts on how to create a custon stylesheet for Mockgen.com using the Bootstrap styles? According to this it has to be an XML format, I'm not sure what that means:http://www.mockgen.com/intro/

balsamiqAdminMike

balsamiqAdminMike replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi, Drew. Mockgen questions can be best answered in their forum here: https://getsatisfaction.com/xemware

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Awesome! Thanks!

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Excellent! Thanks!

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Awesome, Thanks a lot

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi Mike,
great work. Is this symbol library released under an open source license?

The reason I ask is, I'm working on a Balsamiq Mockups to Twitter Bootstrap converter. I have all of the Base CSS stuff working(http://twitter.github.com/bootstrap/base-css.html) and would like to use this symbol library for the Components, so I don't have to recreate them all.

Would be great if I could ship it with the converter or download it directly from here.
The converter will be open source and free to use.

Chris

Leon

Leon replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi Chris,
All Mockups To Go libraries are Public Domain, as described here: https://mockupstogo.mybalsamiq.com/projects/aboutmtg/Contributing. That means that, yes, you're free to use them for the project you're working on. Please let us know when it's complete, we'd love to see it!

Leon

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Great!
Will let you guys know when it's done. Hopefully this weekend.

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Thanks

Chris

Chris replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Do I just save the image above and use positioning to use each element in my wireframes?

Leon

Leon replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi Chris,
You don't need to use them as images. You can download the Mockups (.bmml) file and use each component as a Mockups symbol. Here's more information about how Symbols and Mockups To Go work: http://support.balsamiq.com/customer/portal/articles/131430. Hope this helps, Leon.

Chris

Chris replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Thanks Leon. I'm reading about symbols now. I think I can just upload the .bmml file to mysalmiq, yes?

Leon

Leon replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Hi Chris,
Yes, you are right. There is a section in the link I included called "Where to Save BMML Files in myBalsamiq" that will tell you how to upload them to your assets so that you can use them as symbols. -Leon

Guest replied 1 year ago , re: balsamiqAdminMike's Version 2 from 2 years ago

Looks extremely professional. You saved enormous time. Thank you.

Guest replied 12 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

thanks

Guest replied 12 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

thanks

Guest replied 12 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

Thank You!!!

Guest replied 10 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

Bootstrap is awesome, thanks!

Guest replied 9 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

Bootstrap 3 is at RC1. An update would be nice.

Guest replied 7 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

This is great. It will do as a stand in for Pure!

Guest replied 6 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

Hey... I am late to this party but found your Twitter Bootstrap inspired components and am very stoked! Thanks for the effort... found it very valuable!

Guest replied 5 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

Thank you very much, this is so useful.

Guest replied 5 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

This is fantastic Mike, especially when combined with your Boostrap grid symbols. Do you have any plans to update this to keep up with Bootstrap 3?

balsamiqAdminMike

balsamiqAdminMike replied 5 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

@Mike Heraghty: Yes, I should. I'll put it on my to do list.

Guest replied 2 months ago , re: balsamiqAdminMike's Version 3 from 1 year ago

I've been looking for this since a lot. thanks!

Add a Comment

Some HTML is allowed. You can also use Mockups text formatting markup.
Ex: *bold* _italic_ &underlined& {color:#FF0000}colored{color} * New lines with asterisks for bulleted lists.

Are you sure you want to delete mockup "XYZ?"

Your mockup's data and history will be deleted forever!

Notify project members