Problem getting bootstrap.css to be included using wiredep

[mounte]

When I create a project using:
yo angular
no to compass, yes to bootstrap.
running on ubuntu server 14.04
Everything runs through smooth. I can start up the server with grunt serve but I am presented an unstyled page like this:

The header of html looks like:

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

So, no link rel to the bootstrap main css. When I run the grunt build I dont get anything either.
The output of grunt wiredep --verbose --debug is:

Running "wiredep:app" (wiredep) task
[D] Task source: /home/danielw/aapp/node_modules/grunt-wiredep/tasks/wiredep.js
Verifying property wiredep.app exists in config...OK
Files: app/index.html
Verifying property wiredep.app.src exists in config...OK
Options: src=["app/index.html"], ignorePath={}

In the same machine if I start using the webapp generator everything works as expected.
Any idea why it is like this?

[ghost]

I'm having the same issue under windows

[strongwray]

me too,how to deal with this problem? before i used it's ok.

[RipCurrent]

ditto! but found this a great way of getting to understand yeoman :)

[joaopedropannain]

It's something wrong with bower.

I put the bootstrap.css on bower components, but grunt remove after few seconds:

 < ! -- bower:css -- >
 < link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" / >

I don't know about bower to correct the script, but create a another css before bower:css

 < ! -- build:css(.tmp) styles/manualvendor.css -- >
    < link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" / >
    < ! -- endbuild -- >

[hpieroni]

I'm having the same problem.

[masakura]

Me too.

[nivek91]

+1 same problem, apparently they removed css from bower.json

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

[dspice]

Some temp fixes and causes listed here:
twbs/bootstrap#16663

Some Bootstrap bower.json changes broke wiredep insertions.

[cvrebert]

See taptapship/wiredep#180 and bower/spec/pull/43

[47ronin]

Bootstrap v3.3.5 will break and delete the bootstrap.css include. Downgrading to v3.3.4 as a dependency will fix this! I tore my hair out trying to figure out the issue!

[dovy]

Boostrap 3.3.5 is replaced with Boostrap 3.0.0 for me...

[Frondor]

This worked for me: http://stackoverflow.com/questions/30946498/yeoman-and-bower-not-adding-bootstrap-css-angular-generator

Something is wrong with matching versions

[eddiemonge]

Uh well this is interesting. Setting the version of Bootstrap to 3.3.4 for now. @stephenplusplus @sindresorhus ideas?

[budkin76]

+1 This was driving me mad until I found the workaround mentioned.

[yijingping]

@eddiemonge thanks. it works for me.

[shakhrillo]

+1 I did not find the answer and I removed all and wrote my code myself

[eddiemonge]

Should be fixed in 0.12.0

[katlimruiz]

@WayneRiesterer comment worked for me.

[mymai91]

In index.html, link bootstrap file

<!-- build:css(.) styles/vendor.css -->
      <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- bower:css -->

[starter69]

@mymai91 that code is removed once you run grunt.

[kutyel]

I am runing gulp and have the same error, tried downgrading bootstrap to 3.3.4 and still happens, plus a weird error Error in plugin 'run-sequence' Message: An error occured in task 'client:build'. Any ideas?

[mymai91]

@sean-madhavan you are right

[hakimirza]

@WayneRiesterer I'm using Bootstrap 3.3.6 and your solution worked very well, thank you :)

[fabiopaiva]

the problem persist using gulp, grunt ok

[ismaproco]

@WayneRiesterer your solution worked for me, this is my bower.json

{
  "name": "testapp",
  "private": true,
  "version": "0.1.0",
  "dependencies": {
    "bootstrap": "~3.x.x",
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/js/bootstrap.js",
        "dist/css/bootstrap.css",
        "less/bootstrap.less"
      ]
    }
  }
}

[postalC]

Any work-around for gulp, tried various suggestion and none of them work for gulp.

[anilsawant]

I did the following selections and it worked for me:
** say NO to suing Sass with Compass
? Would you like to use Gulp (experimental) instead of Grunt? (y/N) n
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? (Y/n) n
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? (Y/n) y
? Would you like to include Bootstrap? Yes

[overmedia]

@WayneRiesterer solution worked for me.

[overmedia]

@WayneRiesterer solution worked for me.
"bootstrap": "^3.2.0" on OS X

[ariefitriadin]

@WayneRiesterer your solution worked for me, this is my bower.json

{
"name": "testapp",
"private": true,
"version": "0.1.0",
"dependencies": {
"bootstrap": "~3.x.x",
},
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
}
}
}

yeah this work as well for me

[jxc876]

Seems to work fine with the latest version of yeoman-angular (using grunt),
but doesn't seem to work with gulp :(

[khemkaran14]

got the same issue on windows...
just did
bower install bootstrap
and then
grunt serve
it worked for me.

[victorazevedo]

I put :
bower_components/bootstrap/dist/css/bootstrap.css
in the index.html and it´s working now.

[gouravmakhija18]

I have added "bootstrap-sass-official": "~3.1.0", at top of dependencies, everything work awesome.

e.g.

"dependencies": {
            "bootstrap-sass-official": "~3.1.0",
             "jquery": "~2.1.4",

[crrollyson]

Not ideal, but I rolled back to BS version 3.3.4 and setting up like this:

`bower install --save bootstrap#3.3.4`

`bower_concat: {
  all: {
    dest: {
      'js': 'path/to/file/_bower.js',
      'css': 'path/to/file/_bower.css'
    }
  }
}`

[eMahtab]

Just switched to bootstrap 3.3.4 and it worked. Oohh ...

[EriksonMurrugarra]

Ohh. Changing to 3.3.4 Did the Trick. Thank you so much.!

[stefanbaumg]

@WayneRiesterer's solution also works for bootswatch with slight modification:

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

[pavlito]

Hi guys, you can still use latest version of bootstrap 3.3.7 .

You need to modify bower.json located inside bootstrap folder.

Need to add key "overrides and specify bootstrap.css location.

Here is mine content
<pre> { "name": "yb", "description": "YourBourse project", "main": "index.html", "authors": [ "Pavle Lucic <[email protected]>" ], "license": "MIT", "homepage": "", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "app/libs", "test", "tests" ], "dependencies": { "respond": "^1.4.2", "html5shiv": "^3.7.3", "modernizr": "^3.3.1", "jquery": "^3.1.1", "bootstrap": "3.3.7", "bootstrap3-ie10-viewport-bug-workaround": "^1.0.0" }, "overrides": { "bootstrap": { "main": [ "dist/css/bootstrap.css" ] } } } </pre>

[jpdavy]

Wiredep works by looking at the bower.json file inside the bower packages file. In this case bower_components/bootstrap/bower.json

Open bower_components/bootstrap/bower.json and change:

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

to

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

If you want to use the bootstrap theme css as well:

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