How to integrate Bootstrap CSS in an Angular application

Question

I have two similar very small example Angular applications that integrate Bootstrap CSS. One works and one that I created myself doesn't. It is unclear what the difference is and why it doesn't work in my case.

My steps are as follows:

npm install bootstrap --save

This updates package.json and then subsequently I update index.html and add

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

Exactly the same line as the working application but in example app that I created using ng new new-app it is not working.

Network tab in chrome shows 404. Basically the URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css cannot be found.

What is the correct / complete way to integratie Bootstrap CSS in an Angular app?

asnwer by @brk will do the trick if not you can always use a CDN in index.html that will work — Rahul Singh
– Rahul Singh, Commented Aug 30, 2017 at 5:54

Max · Accepted Answer · 2017-08-30 06:35:16Z

3

It seems you are using angular & angular cli

If this is the case then you can actually add the bootstrap.css file in .angular-cli.json inside array corresponding to style key like this

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

Two other possibilities are importing this bootstrap.css at main .css file using @import or you can require this in the main index.js file.

edited Aug 30, 2017 at 6:35

Max

1,2681 gold badge21 silver badges42 bronze badges

answered Aug 30, 2017 at 5:45

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Comments

Carsten · Accepted Answer · 2017-08-30 05:45:19Z

0

Since you are using Angular-CLI:

update your .angular-cli.json file to include the bootstrap style:

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

No need to include it in your index.html

answered Aug 30, 2017 at 5:45

Carsten

4,22826 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to integrate Bootstrap CSS in an Angular application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related