CODEWITHSUNDEEP
javascriptcssangular
onknows
onknows

Reputation: 6681

How to integrate Bootstrap CSS in an Angular application

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?

Upvotes: 1

Views: 186

Answers (2)

brk
brk

Reputation: 50291

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.

Upvotes: 3

Carsten
Carsten

Reputation: 4208

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

Upvotes: 0

Related Questions