Ember & Bootstrap in love


I lately started to work with some guys on an integration of Bootstrap & Ember together,


It is really fun and easy to use and lightly integrate bootstrap and ember components altogether.

It’s just the beginning of it but we have a roadmap adding support for most Bootstrap components, if someone want anything specific feel free to open issues on Github!

Hope it will help Ember.js community to build better apps in a free world! :slight_smile:



Have you seen this project? Seems to be doing the same thing:


1 Like

Wow, this is gonna be confusing.

https://github.com/ember-addons/bootstrap-for-ember vs. https://github.com/emberjs-addons/ember-bootstrap

I’m one of the committers for ember-bootstrap, I see your main point of difference is using components. Would you mind starting a discussion in the ember-bootstrap issues about maybe working together on this.

No need to build the same tool twice :smile:

1 Like

Awesome, thanks Asaf! Do you have plans for modals?

https://github.com/emberjs-addons/ember-bootstrap has modals, but it uses TBSv2, and I use v3.

1 Like

you guys should absolutely work together!!

Additionally, I begun work on proper namespace support. I wonder if this would be useful for you guys.

something like:



Bootstrap.ItemsView would be accessible in the container via view:items@bootstrap

{{render 'items@bootstrap'}} could also be possible

let me know what you think, I would love to work with you guys to improve how we share addons.

1 Like

Sure, please see issue #11, in the nearest coming version.

Hey, I remembered your comment about Modals,

Take a look: http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/modal


1 Like

Will view:items@myLibrary.fooNamespace work? We need to start thinking in nested namespaces because it will be needed soon as the complexity of our code/libraries/framework/etc grow.

view:items@myLibrary.fooNamespace could simply be expressed as its own namespace? view:items@my-library-foo-namespace

Bootstrap-For-Ember looks really promising but I dont see a way to add additional classes to the elements. My Bootstrap 3.0 Ember project has some additional class elements that I need to be able to implement and I dont see how to currently.

Using link-to I currently do it this way:

{{#link-to 'register' classNames='btn btn-lg btn-accent' tagName='button' }}Register{{/link-to}}

And in BFE I would do this:

{{bs-button size="lg" title="Register}}

Where do I add the btn-accent class?

Am I missing something or is this in the pipeline for later?

I have my own implementation of the popover as a component, you guys are welcome to iterate on it if it’s up to par :smile:


Hey, I suggest you to post issues in GitHub or write in the forum: https://groups.google.com/forum/#!forum/bootstrap-for-ember

Regarding your question, it’s simple as:

{{bs-button class="btn-accent" size="lg" title="Register}}

Have fun!

@asaf000 Thanks for this awesome project!!

it will be nice if you had support of using btn-group as checkboxes, and of dropdowns

@iguider it’s working, see: http://emberjs.jsbin.com/kemix/1/

1 Like

I[quote=“iguider, post:15, topic:2301”] the documentation is wrong [/quote]

I’m not following the issue, here is the example from the documentation http://emberjs.jsbin.com/joyez/1/edit. Obviously changed the controller name and namespace to adapt to my example.

This is neat, anyone working on something similar but for Foundation?