CODEWITHSUNDEEP
cssangularvisual-studiobootstrap-4
Su So
Su So

Reputation: 187

Bootstrap styles not loading in angular 10

I am working on a project where I am using angular 10 and trying to use Bootstrap library, but the issue is BootStrap styles are not loading.

In package.json I can see bootstrap dependency there.

"bootstrap": "^3.4.1",

I tried to debug in every possible way but not able to figure out yet as I am new to Bootstrap.

Don't want to see my button like this.

Currently, the button is looking like this

Any help would be highly appreciated.

Upvotes: 3

Views: 12722

Answers (7)

nativelectronic
nativelectronic

Reputation: 862

Go to the package.json and check if the versions are right.sometimes you got a bad combination when are installing popper,jquery and bootstrap. for example

//package.json
"dependencies": {
"bootstrap": "^4.6.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}

and in the //angular.json

"styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

remember delete node_modules and package-lock.json if you are modifying the file package. and at the end re install all again with npm install

Upvotes: 0

vinod
vinod

Reputation: 31

if u add bootstrap while sever is already running it won't affect.. we should restart the server then it will work .. if not check the below steps

make sure u have this code in ur angular.json file

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

to install bootstrap and jquery use this cmds ..first go to ur app diectory then open terminal hit this cmds

npm install bootstrap@latest --save

npm install jquery@latest --save

Upvotes: 3

Alex G
Alex G

Reputation: 747

I was expecting to see the bootstrap.css in the html <head> section like everyone was saying for older versions, but instead it was hidden, bundled in the styles.css file in the browser.

Only these steps were required:

npm install --save bootstrap

And in angular.json, unde build (not test):

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

Now run ng serve again

Upvotes: 1

CatroVal
CatroVal

Reputation: 11

I had the same issue and after restarting the server it just works fine for me. I installed it from the npm using the npm install command.

Upvotes: 1

Su So
Su So

Reputation: 187

Another walk around to this, If bootstrap is successfully installed and still Bootstrap styles not loading , just add

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

in your angular.json.

Styles will be visible now.

Upvotes: 0

Marcus Cantu
Marcus Cantu

Reputation: 493

When using bootstrap in angular there are several ways of adding it in. The most effective approach for me is to run ng add @ng-bootstrap/ng-bootstrap in the root of your project which will add required data in your angular.json and your package.json.

I should note that you have to have Angular Cli version greater than 9.

Upvotes: 10

Hamza Awan
Hamza Awan

Reputation: 1

Include Bootstrap link <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> in index.html file and recompile the apps it will work or second way is to include your bootstrap assets path in angular.json -> projects -> architect -> styles

Upvotes: 0

Related Questions