wetjosh wetjosh -4 years ago 230
jQuery Question

How to use Bootstrap JavaScript plugins (dropdowns, modals) in Emberjs

I can't get Bootstrap JavaScript plugins like dropdowns and modals to work out of the box in Ember. From the command line:

ember new test-app
ember install ember-bootstrap

ember generate route test
ember generate component jquery-test



app/templates/components/jquery-test.hbs (copied from getbootstrap.com):

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<div class="modal-body">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>


import Ember from 'ember';

export default Ember.Component.extend({
didInsertElement: function() {

The log prints out 4, so jQuery is installed and working, right? But while the Boostrap button is styled like a Bootstrap button should be, it doesn't function. No modal appears when I click it. Same with a dropdown menu.

  • Ember v2.7.1

  • jQuery v2.2.4

  • Bootstrap v3.3.5


@ykaragol answered my question perfectly (the accepted answer below). However I now understand that you do not have to use the ember-bootstrap add on to use bootstrap in Ember (though it does look like it has the added benefit of some nifty components). An alternative is to install vanilla Bootstrap with Bower via
bower install bootstrap --save-dev
and placing the following in ember-cli-build.js

app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', { destDir: 'fonts' });
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', { destDir: 'fonts' });
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', { destDir: 'fonts' });
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', { destDir: 'fonts' });

make sure to restart ember server via
and then
ember s

Answer Source

ember-bootstrap is good enough. But importing the js files are not documented well.

You need to add specific javascript file from the addon. Add the following line to ember-cli-build.js:


File content should be something like this:

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
    // Add options here


    return app.toTree();

You can find the list of javascript files under bower_components/bootstrap/js/ directory. (Such as popover, tooltip)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download