How can I add Bootstrap to my ember-cli app?

Ember CLI
1

Hi! I am trying to add Twitter Bootstrap to my ember-cli app, and it appears to be much more complicated than I’ve expected.

Can someone give me a clear set of instructions on how should I do that?

2

You can use an addon I think there are few if you search em.

Or you can bower instal bootstrap and then in your brocfile app.import the bits you want directly from your local bower folder. IF you want to use less or sass you can also link to the css using import in your app.less / app.sass

I’m using only the affix javascript here is where I import it in my brocfile

[
  'bootstrap/js/affix.js'
].forEach(function(i){
  app.import(app.bowerDirectory + '/' + i);
});

Including css in my app.less

@import '../../bower_components/bootstrap/less/bootstrap.less';

see also

3

I’ve just dropped bootstrap’s JS in vendor/bootstrap and included them in brocfile:

app.import('vendor/bootstrap/transition.js');
app.import('vendor/bootstrap/affix.js');
app.import('vendor/bootstrap/dropdown.js');
app.import('vendor/bootstrap/modal.js');

I’m also using ember-cli-less to compile less files in app/styles/ into CSS. No need for dedicated bootstrap addon really.

1 Like
4

First add it to your build:

bower install --save-dev bootstrap

Then add it to your Brocfile.js

app.import('bower_components/bootstrap/dist/css/bootstrap.min.css')

That should do it.

1 Like
5

In ember-cli minifyCSS is enabled so I think it is better to let Ember do the minify. See:

https://github.com/broerse/ember-cli-blog/blob/master/Brocfile.js

6

in newer versions of ember-cli, you have to put the app.imports in .ember-cli-build.js instead of Brocfile.js

1 Like
7

Thanks! The new link is: https://github.com/broerse/ember-cli-blog/blob/master/ember-cli-build.js

1 Like
8

Thanks for this detail!

1 Like