14

I'm going through the tutorial on setting up an AngularJS app using Yeoman (http://yeoman.io/codelab.html), and Bootstrap's CSS files are not getting included in the index.html file. So when I run grunt serve, the page is missing all the Bootstrap styles, unlike whats shown in the tutorial image.

The Bootstrap javascript files are included in the index.html file though.

Is this normal behaviour or am I meant to include it manually? I would've expected running Grunt Wiredep to include the bootstrap css files in between the <!-- bower:css --><!-- endbower --> placeholders in the index.html file?

rodp82
  • 275
  • 3
  • 12
  • check in Gruntfile.js, most likely it is ignore in wiredep configuration, to be able to import directly in app.scss, because of scss variables. – YOU Jun 24 '15 at 00:53
  • I checked Gruntfile.js and the only options in the wiredep config is `src: ["<%= yeoman.app %>/index.html"], ignorePath:/\.\.\//` – rodp82 Jun 24 '15 at 01:11
  • @rodp82 did you used bower package manager to install Bootstrap? or you manually include the bootstrap ?? – nithin Jun 24 '15 at 03:33
  • @nithin I used bower. When using yeoman to build the angular app, part of the setup includes a question on whether to include bootstrap in the app, and I tried both methods, yes to include during setup and, no and install it after setup separately. Both methods had the same result. However if I installed fontawesome and ran Grunt Wiredep, those css files were included in the index.html file – rodp82 Jun 24 '15 at 07:44

5 Answers5

37

Add the override code for bootstrap to your bower.json file (don't edit anything in bower_components)

"dependencies": {
...
},
"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "less/bootstrap.less"
        ]
    }
}

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

lotusdragon
  • 486
  • 4
  • 6
2

The official answer from Bootstrap is to use the overrides block in bower.son:

"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "less/bootstrap.less"
    ]
  }
}

Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the main field in bower.json works. Recently, Bower updated their spec to address this and clarify how main should work, and we updated our bower.json accordingly. Unfortunately, wiredep broke as a result if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is working to further update their spec to address this problem and better assist tools like wiredep.

Source: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Ryan Solida
  • 21
  • 2
0

Did you used sass version of bootstrap when you chose bootstrap option. I just setup with following option

? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes

This work for fine me.

When you used this flow, in your main.scss file included following line.

// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

If it's there definitely bootstrap style need to apply.

If you go without bootstrap option. You need to used in command line to install bootstrap using following command. bower install bootstrap -S The '-S' needful. After that you see it not injected the bootstrap.css file for index.html. Then you have to do small change in bower.json file in install bootstrap folder. Browse following location to find the bower.json

/bower_components/bootstrap/

Open bower.js and find the following snippets,

"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],

and change as follow,

"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js",
"dist/js/bootstrap.css",
"dist/js/bootstrap-theme.css"
],

save the file and run grunt serve command again.

nithin
  • 153
  • 15
  • Thanks for your answer. I was not using Sass in the installation. Changing the bower.js file in the bootstrap folder does fix things, but is this normal practice? I was under the impression that you shouldn't need to make changes to anything in the bower_components folder as those are not stored in version control. – rodp82 Jun 25 '15 at 00:48
  • No that is not the good way to do so. Because when you update the component it override the changes you made in the files. Normally we do it when we not used sass version of the packages. You have other option too. You can manually include the css file to the html under try that way also. Otherwise you have to used sass version. – nithin Jun 25 '15 at 01:00
0

I had the same issue and that's what I found on the internet to solve it:

You have probably installed the version 3.3.5 of bootstrap. You can verify it in the bower.json file of your project.

"bootstrap": "3.3.5"

If so, I found these two options to get the css style back:

  1. You can install Sass for bootstrap instead of the basic css, follow @nithin's instructions if you want.

  2. OR, in the version 3.3.5 of bootstrap the wiredep task does not inject the bootstrap.css in your index.html (it should be fixed soon), so you can downgrade your bootstrap version to 3.3.4 by writing the following in a command prompt:

    cd /../your-project-dir/

    bower install bootstrap#3.3.4

then run the folowing : 

bower install 
grunt wiredep

and try again with a 

grunt serve

Hope this will help you.

These sources helped me solve my issue. Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

Community
  • 1
  • 1
hhelbawi
  • 151
  • 2
  • 12
0

This concerns also the new Bootstrap 4. And there's one important thing: you need to add Bootstrap's "dependencies" to be sure jquery will be injected before bootstrap.js

"dependencies": {
(...)
},
"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "scss/bootstrap.scss",// <-- for new Bootstrap
      "less/bootstrap.less" // <-- for old Bootstrap
    ],
    "dependencies": {
      "jquery": ">= 3.2.1"
    }
  }
}
Paweł
  • 146
  • 11