Angular 2 doesn't import Bootstrap css

8
votes

Directly from https://angular.io/docs/ts/latest/guide/forms.html

Let's add the stylesheet.

Open a terminal window in the application root folder and enter the command:

npm install bootstrap --save

Open index.html and add the following link to the head.

link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

However, i keep getting 404

GET http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css

It works when i add the script with the online address, but why does angular fails to find the path to my file?

5
twitter-bootstrapangular
Can you check if css exists at that location on file system. Are you using angular cli to build ? If yes then you need copy this to vendor and adjust the path - Arpit Agarwal
Yes, the file is there. By adding to the vendor do you mean to vendorNpmFiles? i added this line there 'bootstrap/**/*' and it still doesn't work. - David Pascoal
Yes, Now check if file is there in dist/vendor. If it is then change link to link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css"> - Arpit Agarwal

5 Answers

7
votes

It is working when index.html is in the same directory as node_modules.

To add bootstrap from angular-CLI put

'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'

in angular-cli-build.js and run ng build

21
votes

If you're using angular-cli, you can go to root/styles.css and add this line

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Or go to .angular-cli.json and modify styles

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
4
votes

If you use angular-cli after the webpack transition, add

"../node_modules/bootstrap/dist/css/bootstrap.css"

to the styles array in angular-cli.json like:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

If you also use bootstrap javascript, add those files to the scripts array.

1
votes

You can use 

@import "~bootstrap/dist/css/bootstrap.css";

or 

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
0
votes

You are using angular cli for build hence you need to copy bootstrap to vendor directory by updating vendorNpmFiles in angularcli-build.js 

bootstrap/**/*.*

Now you need to update link of index.html to pick css from vendor 

< link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">