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

**URL:** <https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002>\
**Category:** Ember CLI\
**Created:** [May 14, 2015, 11:58am UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002 "2015-05-14T11:58:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![raymestalez](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/raymestalez/32/10733_2.png) [@raymestalez](https://discuss.emberjs.com/u/raymestalez)\
**Post date:** [May 14, 2015, 11:58am UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/1 "2015-05-14T11:58:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![varblob](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/varblob/32/10304_2.png) [@varblob](https://discuss.emberjs.com/u/varblob)\
**Post date:** [May 14, 2015, 1:12pm UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/2 "2015-05-14T13:12:15Z")

</div>

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

> [@Why is it so difficult to add bootstrap?](http://discuss.emberjs.com/t/why-is-it-so-difficult-to-add-bootstrap/6682):
>
> I’ve spent hours trying to get bootstrap working and am beginning to think that Ember is still in beta. At this point all I want to do is get bootstrap from a CDN, e.g. \<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"\> \<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"\> But now I’m getting all these security violations: [Report Only] Refused to load the stylesheet ‘[https://maxcdn.bootstrapcdn.com/bootstrap/3.3…](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css)

---

<div class="post-metadata">

**Author:** ![rafalp](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rafalp/32/10130_2.png) [@rafalp](https://discuss.emberjs.com/u/rafalp)\
**Post date:** [May 14, 2015, 3:56pm UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/3 "2015-05-14T15:56:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kosso](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kosso/32/10866_2.png) [@kosso](https://discuss.emberjs.com/u/kosso)\
**Post date:** [May 14, 2015, 3:57pm UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/4 "2015-05-14T15:57:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [May 16, 2015, 11:05am UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/5 "2015-05-16T11:05:24Z")

</div>

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](https://github.com/broerse/ember-cli-blog/blob/master/Brocfile.js)

---

<div class="post-metadata">

**Author:** ![greyhwndz](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/greyhwndz/32/11246_2.png) [@greyhwndz](https://discuss.emberjs.com/u/greyhwndz)\
**Post date:** [August 31, 2015, 6:05am UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/6 "2015-08-31T06:05:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [September 4, 2015, 2:25am UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/7 "2015-09-04T02:25:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jean](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jean/32/9293_2.png) [@jean](https://discuss.emberjs.com/u/jean)\
**Post date:** [November 13, 2015, 3:32pm UTC](https://discuss.emberjs.com/t/how-can-i-add-bootstrap-to-my-ember-cli-app/8002/8 "2015-11-13T15:32:09Z")

</div>

Thanks for this detail!