CODEWITHSUNDEEP
twitter-bootstrapangular
David Pascoal
David Pascoal

Reputation: 1441

Angular 2 doesn't import Bootstrap css

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?

Upvotes: 8

Views: 21366

Answers (5)

Eslam Sameh Ahmed
Eslam Sameh Ahmed

Reputation: 4032

You can use 

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

or 

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

Upvotes: 1

Frank Nguyen
Frank Nguyen

Reputation: 6653

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"
]

Upvotes: 21

MartinW
MartinW

Reputation: 5041

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.

Upvotes: 4

KB_
KB_

Reputation: 2123

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

Upvotes: 7

Arpit Agarwal
Arpit Agarwal

Reputation: 4023

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">

Upvotes: 0

Related Questions