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

Bootstrap

Symbols of the controls for the Bootstrap library. If you're interested in using this, see the Bootstrap template.

More info about Bootstrap at http://getbootstrap.com

Comments (60)

Guest replied 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

Really cool!

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

Great Job!!

Thank you very much!

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

Amazing.

Paul

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

GREATNESS!

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

Awesome! :)

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

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

@SharePointOscar

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

Thanks!

Casey

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

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

Casey

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

Nevermind I think I figured it out!

balsamiqAdminMike

balsamiqAdminMike replied 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

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

Guest replied 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

Definitely trying this, looks great. Thanks dude

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

You are my hero! :) Many thanks for this

Guest replied 3 years ago , re: balsamiqAdminMike's Version 2 from 3 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 3 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

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

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

Awesome! Thanks!

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

Excellent! Thanks!

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

Awesome, Thanks a lot

Guest replied 2 years ago , re: balsamiqAdminMike's Version 2 from 3 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 2 years ago , re: balsamiqAdminMike's Version 2 from 3 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 2 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

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

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

Thanks

Chris

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

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

Leon

Leon replied 2 years ago , re: balsamiqAdminMike's Version 2 from 3 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 2 years ago , re: balsamiqAdminMike's Version 2 from 3 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 2 years ago , re: balsamiqAdminMike's Version 2 from 3 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 2 years ago , re: balsamiqAdminMike's Version 2 from 3 years ago

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

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

thanks

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

thanks

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

Thank You!!!

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

Bootstrap is awesome, thanks!

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

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

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

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

Guest replied 2 years ago , re: balsamiqAdminMike's Version 3 from 2 years 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 1 year ago , re: balsamiqAdminMike's Version 3 from 2 years ago

Thank you very much, this is so useful.

Guest replied 1 year ago , re: balsamiqAdminMike's Version 3 from 2 years 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 1 year ago , re: balsamiqAdminMike's Version 3 from 2 years ago

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

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

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

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

I downloaded the .bmml file, but when I open it, I don't see any "backgrounds for any element. For example, I don't see beautiful grey background that should have been for the breadcrumbs element. Would you suggest anything to fix this?

Ben

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

Yulya, sorry for the trouble! I've tried, but am unable to reproduce what you are seeing. Could you email support@balsamiq.com with some more details? Thanks!

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

It it awesome! Makes me exciting! Thanks!

balsamiqAdminMike

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

Guest replied 6 months ago , re: balsamiqAdminMike's Version 6 from 10 months ago

Thanks! Was just building this myself, and luckily found yours before I got too far.
In the spirit of improvement:

  • You have Lead Body Copy as 20px, it should be 21px
  • You have all text colour as black, it should be gray1 (in Balsamiq-sepak)

  • The heading styles in Bootstrap are semibold. We don't have this option in Balsamiq. I see you've chosen to go with Bold. I think Regular looks closer to semibold at large font sizes. Try a bold and a regular H1 version of the text "h1. Bootstrap heading", and then compare it to http://getbootstrap.com/css/#type-headings
    (I'm on a Mac using FF.)

    Guest replied 6 months ago , re: balsamiqAdminMike's Version 6 from 10 months ago

    Suggestion: how about adding a Bootstrap modal window to the template? BS modal is quite different from Balsamiq library.

    Guest replied 6 months ago , re: balsamiqAdminMike's Version 6 from 10 months ago

    All 3 text elements of your Jumbotron are the incorrect font size. See http://getbootstrap.com/components/#jumbotron

    Guest replied 4 months ago , re: balsamiqAdminMike's Version 6 from 10 months ago

    Hi There,
    I am a backend developer willing to use this mockups.
    Is there a ready to use bootstrap library somewhere, which I can download and use for my personal projects?

    balsamiqAdminMike

    balsamiqAdminMike replied 4 months ago , re: balsamiqAdminMike's Version 6 from 10 months ago

    Hi, Frenando. If you're interested in using this Mockup, you can find the download link here: https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap.bmml

    Guest replied 4 months ago , re: balsamiqAdminMike's Version 7 from 4 months ago

    Hi balsamiqAdminMike, thank you for the answer.
    These mockups are really really awesome!!!
    I am sorry for being such a newbie to this aspects of designing.
    I was expecting something more like a folder with css and images ready to include.

    Can you point me in the right direction?
    How can I manage(transform) those images and use it with bootstrap?

    I will let you know as soon as I manage integrate into my open source projects :D

    Thank you in advance for your patience and support.

    balsamiqAdminMike

    balsamiqAdminMike replied 4 months ago , re: balsamiqAdminMike's Version 7 from 4 months ago

    This is a Symbols library to use with Balsamiq Mockups, so the file you can download in the link above for use in the app. If you're looking for more information about Balsamiq Mockups, please look at our site at http://balsamiq.com, or email us at support@balsamiq.com and we can help you out.

    What this is not is a tool for front end development. This symbols library will let you create a wireframe with Bootstrap in mind, but you then still have to build the product in bootstrap in a front end development environment. Hope that helps. Email us if you need any more info.

    Guest replied 2 weeks ago , re: balsamiqAdminMike's Version 7 from 4 months ago

    Balsamiq 3 crashes whenever I try to import the bmml file.

    balsamiqAdminMike

    balsamiqAdminMike replied 2 weeks ago , re: balsamiqAdminMike's Version 7 from 4 months ago

    I just happened to import it myself today. Are you using the menu Projectgt; Import gt; BMML Symbol Libraries?

    Send us an email at support@balsamiq.com if that doesn't work.

    Guest replied 2 days ago , re: balsamiqAdminMike's Version 7 from 4 months ago

    I tried to import the BMML with the Symbol Librairies options and it crashed my balsamiq, but Import Mockups works fine

    balsamiqAdminMike

    balsamiqAdminMike replied 2 days ago , re: balsamiqAdminMike's Version 8 from 2 days ago

    Hi, PeterFour. We can confirm that there's a bug right now in Version 3.x that's preventing this Symbol Library from importing using the menus, but we found a workaround you can use while we fix the bug.

    1) Download the Symbol library: https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap.bmml and open the enclosing folder where you saved it on your computer (in Windows Explorer or Finder).
    2) Open Balsamiq Mockups and switch to the Symbols panel using the menu "View > Symbols."
    3) Drag the Bootstrap.bmml file from your the computer directly into the Symbols panel.

    The library should import properly. Thanks for letting us know of the problem! We'll get it fixed.

    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