Adding bootstrap

[LiranBri]

Hello,

I had troubles adding Bootstrap. i would like to share the steps i did in order to make it work. since i beleive there must be a better way, i would like to know how you guys are doing it.

1. bootstrap does not have css file in main function of /bootstrap/.bower.json, so its not loaded automatically by wiredep.so. to solve it, I manually added to index.html under the <!— build:css … —> comment: <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
2. in order to use bootstrap’s fonts, I copied its /fonts/ directory into my /assets/fonts directory (which is copied automatically to /dist/ by gulp), and then in gulp/build.js I added: .pipe($.replace('fonts/', 'assets/fonts/')) it worked, but it sounds pretty dengarouse and not best practice.
3. removed all bootstrap exclude values from 'conf.js' (because it didn't do anything anyway)

Also, its not related to bootstrap, but i had to change build.js's angularTemplatecache's module property from 'angularGulpYoman' into my own app name. was i suppose to do that in order to make it work? if so, why isn't it showen up in the documentation?

thanks a lot, Liran

[wjehring]

Hi, I've run into this issue before and while this isn't an ideal solution, it's a bit easier than what you're doing:

Bower files can have an optional 'overrides' field where you can redefine values set in other bower files. So to include the fonts and css for wiredep, I override the 'main' of the bower file.

So you add the following field to your bower.json:

 "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/js/bootstrap.js",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2"
      ]
    }
  }

This should fix it! Let me know if not.

[rnugraha]

It looks like conf.js will still exclude bootstrap.js and bootstrap.css although bootstrap is opted during the generation

Mine is working after emptying exclude field in conf.js and having overrides in bower.json:

conf.js

exclude: [],

bower.json

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

[AhmetCanSolak]

I have the same problem with my bootstrap dropdown menu. My configuration is a little bit different. Tough, @wjehring 's solution worked for me. Thank you. Also, I would like to ask you is would this be a problem later with my other jquery elements?

[wjehring]

@AhmetCanSolak As in if you have other elements installed as bower dependencies? Your current configuration shouldn't create any issues with that (I wouldn't think). If you mean you're planning on installing other bower dependencies, most should work fine out of the box.

The issue with bootstrap is that it does't declare its fonts in the 'main' field of its bower file. So whether or not you have to do the same thing for other libraries depends on what the libraries' bower files look like. I've had to do similar things for other libraries like fontawesome, just add another override to the "overrides" object in your bower file with an array of the files to include and it should work just fine. I'm not sure whether that answers your question or not, but I hope it helps!

[SunEagle]

rnugraha's answer saved me from a headache after two days looking for an answer.