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.
Any help would be highly appreciated.
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.
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
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.
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
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
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.
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
