How to update and include Twitter Bootstrap 3 on webapp or yo angular?

Question

I used yo webapp or yo angular to create new a project, and I received Bootstrap include is version 2.3.2, but I want use the latest version of Bootstrap.

How can I

Answer 1

Yeoman's webapp & angular generators grab Sass for Bootstrap, which is based on the 2.3.2 build of Twitter Bootstrap.

After you run yo webapp or yo angular, you can add Bootstrap 3.0 by running the following command.

$ bower install --save bootstrap

This will download Bootstrap 3.0 for you.

Answer 2

@micjamking answer is a really good hint, but since with Yeoman things should be easier, I'll save you some googling:

1. yo angular - Say 'No' to Bootstrap here - otherwise it'll download 2.x version
2. bower install --save bootstrap
3. npm install --save-dev grunt-bower-install

4. edit Gruntfile.js - insert marked lines:

   // ...
   } catch (e) {}
   
   grunt.loadNpmTasks('grunt-bower-install');             // INSERT
   
   grunt.initConfig({
       yeoman: yeomanConfig,
       'bower-install': {                                 // INSERT BEGIN
           target: {                                      //   .
               html: '<%= yeoman.app %>/index.html',      //   .
               ignorePath: '<%= yeoman.app %>/'           //   .
           }                                              //   .
       },                                                 // INSERT END
       watch: {
           coffee: {
               files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
               tasks: ['coffee:dist']
   // ...
   

5. edit app/index.html - insert :

   <!-- bower:css -->
   <!-- endbower -->
   

   and:

   <!-- bower:js -->
   <!-- endbower -->
   

   where appropriate - those will inject references to bower-managed resources (bootstrap's stylesheet and JS in our case).

   update 10/5/2013: Consider placing bower:xxx inside build:xxx.
   In our case, bower:css inside build:css and bower:js inside build:js.
   This is needed for minification to work when assembling dist. However I consider this approach not so perfect - see Remarks below. I'm excused a little bit, since this is the very same way the bootstrap version obtained by Yeoman by default gets included in our app :-P
   Note: To get css minification working you might need changing build:css(.tmp) to build:css({.tmp,app}).

6. grunt bower-install

Ready. Now run server (grunt server) and Bootstrap 3 will be available.

---

Remarks - Update 10/5/2013 - inspired by @Luke's enquiry in a comment:

Based on this I added one sub-step to make dist minification work.

Bower's injecting works, so does minifying, however I'm not so happy with this approach.
Reasons:

1. [minor] We're not using already minified resources obtained by bower.
2. Minifying ALL kinds of CSS/JS into a SINGLE file is a pretty lame idea. A better way to include external dependencies in your application would be to have a switch between CDN-fetch (dist) and local copies obtained with bower (dev). Sth like maven profiles.
3. Depending on the application size, downloading all-in-one resources, particularly JavaScripts, will slow down first encounter with our application.
   Later on the rest of the application will be loaded faster, true, but the first time user enters our page, those bulky single-filers will have to be downloaded preemptively.

@yao tony also hadn't found this approach cool - see the referenced question.

Update Nov 2013: You can use grunt's cdnify task. It's cool

---

Software versions I was using:

user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6

Answer 3

For sass Bootstrap update:

This Works for me:

bower install angular-bootstrap
bower install sass-bootstrap

and select the new versions of both...

maybe should add a --save

Note: sass-bootstrap is bean deprecated, is now a official bower for sass version of bootstrap https://github.com/twbs/bootstrap-sass but i dont tried it.