Bower with Bootstrap 3

Question

Trying out Yeoman (1.0.4). Generated an Angular app with yo angular; entered No to installing Bootstrap with Sass, as I wanted Bootstrap v 3 with LESS.

After scaffolding, to get Bootstrap 3, I entered:

bower install bootstrap

That installed bootstrap into bower_components/bootstrap folder. But it did not link/include Bootstrap's CSS or JS in index.html file. Why?

The index.html file does have Angular js files from bower_components folder:

    <!-- build:js scripts/modules.js -->
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbuild -->

But not bootstrap files. Why? Do I have to add/link to them manually? What am I doing wrong? How can I add Bootstrap after generating a scaffold for my app?

Answer 1

According to yeoman's Getting Started guide:

# Install it and save it to bower.json
>bower install jquery-pjax --save

# If you're not using RequireJS...
>grunt bower-install

This is supposed to inject your dependencies into your index.html file.

---

_{Note:
There is some setting up that needs to be done, before being able to use bower-install.
See, here for more details.}

Answer 2

You must edit the index.html. Yeoman generator builds the base index.html. Bower only downloads dependencies as packages... but that's all, it doesn't know anything else about your app and how are you going to use the packages it downloaded. You must add the desired files by yourself.