Angular 2 doesn't import Bootstrap css

Question

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?

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
– Arpit Agarwal, Commented Jul 4, 2016 at 17:07
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
– David Pascoal, Commented Jul 4, 2016 at 17:21
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
– Arpit Agarwal, Commented Jul 4, 2016 at 17:25

Frank Nguyen · Accepted Answer · 2017-11-06 05:00:35Z

21

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

edited Nov 6, 2017 at 5:00

answered Oct 15, 2016 at 1:57

Frank Nguyen

6,6633 gold badges41 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EdoB Over a year ago

This answer is still valid one year later. Well done!

KB_ · Accepted Answer · 2016-07-06 22:44:57Z

7

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

edited Jul 6, 2016 at 22:44

answered Jul 4, 2016 at 17:22

KB_

2,1232 gold badges26 silver badges28 bronze badges

Comments

MartinW · Accepted Answer · 2016-09-14 07:43:59Z

4

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.

answered Sep 14, 2016 at 7:43

MartinW

5,0412 gold badges27 silver badges63 bronze badges

3 Comments

Ananth Ramasamy Meenachi Over a year ago

It is recommended to have Bootstrap CSS to the apps[0].styles; e.i. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ], refer npmjs.com/package/angular-cli

Todilo Over a year ago

@MartinW What is the difference between adding it in the angular-cli.json or just importing it in a sass/scss file (if that is used)?

Plankton Over a year ago

Wonder, why no one upvote this? this is the easiest way. but i did have to redo "ng serve" for the changes to be picked up.

Eslam Sameh Ahmed · Accepted Answer · 2020-02-23 10:29:19Z

1

You can use

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

or

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

answered Feb 23, 2020 at 10:29

Eslam Sameh Ahmed

4,1122 gold badges29 silver badges41 bronze badges

Comments

Arpit Agarwal · Accepted Answer · 2016-07-04 17:29:23Z

0

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

answered Jul 4, 2016 at 17:29

Arpit Agarwal

4,03327 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 2 doesn't import Bootstrap css

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related