angular-cli: Bootstrap styles not loading
Hi,
I followed the steps for Global Library Installation https://github.com/angular/angular-cli#global-library-installation
-
Installed bootstrap@3.3.7 npm install bootstrap --save
-
Then added the needed script files to to apps[0].scripts in angular-cli.json file:
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
and the Bootstrap CSS to the apps[0].styles array:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
- Restarted ng serve
But the bootstrap styles are not loading
OS- Windows 7 Enterprise
angular-cli: 1.0.0-beta.21 node: 6.9.1 os: win32 x64
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 8
- Comments: 45 (3 by maintainers)
I had this issue, then a good old exit and re-run of ng serve was all I needed to do.
add to styles.css @import “~bootstrap/dist/css/bootstrap.min.css”;
Solution 1 (with Bootstrap installed) All you need to do is:
Go to .angular-cli.json under the root directory of your angular app.
Modify the styles array to include bootstrap before styles.css
“styles”: [ “…/node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ], Note: the path to bootstrap is relative to /src/index.html that’s why you need “…/” before node_modules.
Here is an awesome tutoral: https://www.youtube.com/watch?v=JYPyy-hvjYc&list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5&index=1#t=05m18s
Solution 2 (with Bootstrap referenced) All you need to is:
Go to styles.css under the root directory of your angular app.
Add this line at the top:
@import url(‘https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css’); Here is Angular docs: https://angular.io/guide/forms#create-an-initial-html-form-template
don’t work until downgrade , best solution Uninstall angular -> install react -> enjoy
I had the same problem with bootstrap 4. I uninstalled and installed version 3 and it worked npm -install bootstrap@3 --save .angular-cli.json “styles”: [ “styles.css”, “…/node_modules/bootstrap/dist/css/bootstrap.css” ],
I had the same issue yesterday. I found a solution to it. I was importing the styles and script files in the wrong place in angular.json file It must be under build and not test object
I found the solution here https://stackoverflow.com/questions/51998505/styles-not-picking-from-angular-json-styles-array-angular-6-but-working-fine-wi
https://www.techiediaries.com/angular-bootstrap/
That link should clear up a lot of confusion.
@Zhuinden the example in https://github.com/angular/angular-cli/wiki/stories-global-lib is for Bootstrap 4, but you are using Bootstrap 3.
I’m trying to follow a tutorial and I added the following to my
.angular-cli.jsonBut bootstrap does not show on the page.
Changing my index.html into this ugly mess works, but I’m pretty sure this webpack magic should handle it.
I also have
"bootstrap": "3.3.7"in my package.json. Not sure if that did anything. I’m new to this.I’m using Bootstrap v4 with exactly this approach in beta.21 without any issue…
It happen to me today. Ubuntu, Angular 8, Bootstrap 3. Firstly I resolved it by adding
@import "~bootstrap/dist/css/bootstrap.min.css";into styles.css but then I decided to look more into it and I compare angular.json file one from the previous projects where Bootstrap 3 was loading without issues. It is only that “Meld” (compare tool) reveled to me that in a hurry erroneously I added path to the bootstrap"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],under the “test” section instead under “architect” section. Once moved to "“architect” section, bootstrap started loading.I have the same problem with bootstrap v3.3.7. I use the same config like you and it doesn’t work now.
Thanks i have the same problem and it’s work now
I ran into the same issue,Bootstrap was not loading with Angular 6, no matter how I tried to import , finally solved by downgrading bootstrap 4 to 3
Thanks @alextait1 !! Your method worked for me…