Bootstrap styles not applying to my angular 2 project

Question

I added bootstrap css in angular-cli.json - styles. Not applying bootstrap styles to my project. I added in package.json and did npm install. How to resolve this?

angular-cli.json

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

package.json

 "dependencies": {
    "bootstrap": "^4.0.0-beta.2"
 }

Possible duplicate of ng cli + bootstrap: how to add bootstrap? — Jota.Toledo
– Jota.Toledo, Commented Dec 20, 2017 at 11:57

Fabian N. · Accepted Answer · 2018-09-01 09:32:50Z

26

No need to update or reinstall your bootstrap just do below mentioned step it will work for you
open angular-cli.json inside styles array and specifying the path of bootstrap like this:

Angular-cli.json:
```
"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],
```

Open your style.css and paste this at the top:

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

edited Sep 1, 2018 at 9:32

Fabian N.

3,8682 gold badges27 silver badges47 bronze badges

answered Sep 1, 2018 at 7:33

Gaurav Joshi

1,0212 gold badges14 silver badges25 bronze badges

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

3 Comments

Raki Over a year ago

If anybody is using angular 2+ then you will see the angular.json instead of angular-cli.json. Add the above styles and " run npm install bootstrap --save ". I have not imported any @import URL in styles.css but still, It worked for me. Don't forget to " re-run the ng serve"

Fry Simpson Over a year ago

This answer solves the issue replacing "../node_modules/bootstrap/dist/css/bootstrap.min.css" (which was the correct syntax up to Angular 5) with "./node_modules/bootstrap/dist/css/bootstrap.min.css" that is equivalent to "node_modules/bootstrap/dist/css/bootstrap.min.css" (which is the reccomended syntax starting from Angular 6). BUT the problem might be that you are writing such a line in the wrong "styles": [ .. ] array, since there are two of such arrays in angular.json, as @Goel points out here below

Adir Dayan Over a year ago

Thanks, I was missing the data in angular.json. I thought if I run "npm install bootstrap", it take care for that

Sandip Jaiswal · Accepted Answer · 2017-12-20 10:49:31Z

7

In your style.css add following line of code on top and let us know.

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

Also check with following line too

@import url("./node_modules/bootstrap/dist/css/bootstrap.min.css")

Hope it will help.

answered Dec 20, 2017 at 10:49

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

2 Comments

Veera Over a year ago

Added. Remains same.

Sandip Jaiswal Over a year ago

create a demo project on stackblitz.com and provide link so that I can help properly.

Goel · Accepted Answer · 2019-01-27 14:51:43Z

6

There is two styles declaration in angular.json file. One in Builder section and other one test's builder section. Make sure you are putting it in the right section.

"builder" : {
 .....
     "styles" : [                  // It should go here. Around line no. 27
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
 .....
},
"test": {              
 .....
     "styles" : [                  // Not here!
          "src/styles.css",
        ],
 .....
}

answered Jan 27, 2019 at 14:51

Goel

831 silver badge8 bronze badges

1 Comment

Fry Simpson Over a year ago

I was doing exactly the mistake this answer pointed out, thanks! Please, be aware that changes in angular.json aren't taken into accoun automatically as soon you save the file, as changes in your .ts or .html files do. After editing angular.json, if a ng serve is running you have to stop it by Ctrl+C and then run ng serve again.

vishwas meshram · Accepted Answer · 2018-01-23 22:41:24Z

4

I faced the same problem. I tried to find what was the problem but got no result. I installed bootstrap using

npm install --save bootstrap

which installed the latest bootstrap i.e. ver 4, so I deleted installed bootstrap from node_modules folder and updated dependency in packag.json file to earlier version

"bootstrap" : "^3.3.7"

and ran

npm intstall

After specifying the path of bootstrap file in angular style array as

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

it worked fine.

answered Jan 23, 2018 at 22:41

vishwas meshram

3561 silver badge6 bronze badges

Comments

scopchanov · Accepted Answer · 2018-08-30 05:35:52Z

4

Step by step:

In terminal inside your app directory run:
```
npm install --save bootstrap 
```
Open angular.json and search for styles. At the beginning of the array paste the path to your bootstrap.min.css file

Should look like this:
```
"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
        ],
```

Open your style.css and paste this at the top:

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

Restart your server

edited Aug 30, 2018 at 5:35

scopchanov

8,44910 gold badges50 silver badges80 bronze badges

answered Aug 30, 2018 at 1:54

Larry

4255 silver badges12 bronze badges

Comments

Sandip Jaiswal · Accepted Answer · 2017-12-20 10:21:25Z

3

paste following line of code in .angular-cli.json under styles: []

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

answered Dec 20, 2017 at 10:21

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

2 Comments

Veera Over a year ago

I added already this line. Still not reflecting bootstrap styles

Sandip Jaiswal Over a year ago

Can you paste your cli code here with package.json code?

sateesh reddy · Accepted Answer · 2017-12-20 10:29:35Z

0

inside angular-cli.json in

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

answered Dec 20, 2017 at 10:29

sateesh reddy

264 bronze badges

2 Comments

Veera Over a year ago

I added already this line. Still not reflecting bootstrap styles

sateesh reddy Over a year ago

use bootstrap link before style.css may help

Collectives™ on Stack Overflow

Bootstrap styles not applying to my angular 2 project

7 Answers 7

3 Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related