how to make yo angular load bootstrap theme css

Question

yo angular install bootstrap files all fine. The index.html file looks like this at the moment:

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

This doesn't include bootstrap.theme.css file.

What is the recommended way of adding this? Do I manually go in there and add it?

score 7 · Accepted Answer · answered Feb 05 '15 at 06:16

The correct way to do it is override you bower.json file to load bootstrap dependencies, and then run grunt wiredep

The bower.json would look like this:

{
  "name": "frontend",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "json3": "^3.3.0",
    "es5-shim": "^4.0.0",
    "bootstrap": "^3.2.0",
    "angular-cookies": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-local-storage": "~0.1.5",
    "raty": "~2.7.0",
    "kineticjs": "~5.1.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.0",
    "angular-scenario": "~1.3.0"
  },
  "appPath": "app",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/css/bootstrap-theme.css",
        "dist/js/bootstrap.js",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff"
      ]        
    }
  }
}

Source: https://github.com/yeoman/generator-angular/issues/965#issuecomment-68548259

score 3 · Answer 2 · answered Jul 13 '15 at 11:37

3

Do the following

bower install bootstrap-css --save

answered Jul 13 '15 at 11:37

Zouzias

2,330
1
22
32

score 0 · Answer 3 · answered Jan 14 '15 at 14:13

Add it manually below the other .css include if it's locally available on your system (e.g. in bower_components/).

If the file is not locally available I'd add it right above the  otherwise it might break your grunt build and/or grunt serve because of bower trying to minify the file.

The same goes with Google Font imports, place them above the  otherwise bower will try to minify it (under htmlmin options in Gruntfile.js).

Here you can read some more about the subject.

how to make yo angular load bootstrap theme css

3 Answers3