Bootstrap styles not loading #3411

Harsangeet · 2016-12-05T19:56:45Z

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

The text was updated successfully, but these errors were encountered:

hansl · 2016-12-05T21:36:22Z

@filipesilva Any idea?

rolandoldengarm · 2016-12-06T09:43:44Z

I'm using Bootstrap v4 with exactly this approach in beta.21 without any issue...

vfedoriv · 2016-12-11T17:05:48Z

I too. And when downgrade to bootstrap 3.3.7 - still work.
(node 7.2.0)

yanxiaodi · 2016-12-31T14:09:33Z

I have the same problem with bootstrap v3.3.7. I use the same config like you and it doesn't work now.

lukas-kloeppel · 2017-01-09T08:09:37Z

I'm facing the same problem with angular-cli: 1.0.0-beta.21, node 7.2.1 and 4.0.0-alpha.6.

Bootstrap content is included in the generated styles.bundles.css file, but not available in the page

Dinistro · 2017-02-27T14:40:38Z

I can confirm this behavior in 1.0.0-rc.0. I will try to create a reproduction and add it here, if I'm done.

Dinistro · 2017-02-28T06:54:06Z

I found the problem in my case:

If you try to use a bundle from a linked npm package it breaks, because webpack works with the absolute path of the files and so, the exclude options of webpack aren't working anymore. I'm not sure if this is an issue of webpack or not.

There are more problems with linked projects, e.g. #5049, where this could be the reason of the failure.

lukeguzeng · 2017-03-15T11:05:43Z

me also. the style is applied is i import bootstrap.css in styles.css. but i can not get it working in angular-cli.json > styles array.

filipesilva · 2017-05-22T14:43:12Z

Closing as outdated. If this still happens, please let me know.

Zhuinden · 2017-08-10T13:30:15Z

I'm trying to follow a tutorial and I added the following to my .angular-cli.json

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

But 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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

I also have "bootstrap": "3.3.7" in my package.json. Not sure if that did anything. I'm new to this.

filipesilva · 2017-08-21T10:14:08Z

@Zhuinden the example in https://github.com/angular/angular-cli/wiki/stories-global-lib is for Bootstrap 4, but you are using Bootstrap 3.

alextait1 · 2017-12-06T16:31:03Z

I had this issue, then a good old exit and re-run of ng serve was all I needed to do.

faizy6641 · 2018-02-19T23:33:33Z

@filipesilva ,Could u pls check my issue #9690?i am also facing similar type of issue.
I am stuck in this issue from past 2 weeks,pls help me out.Thanks

manojsgh · 2018-02-23T04:28:14Z

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"
],

shireefkhatab · 2018-03-14T03:44:57Z

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.

Exit the current session of ng serve and start it again.

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

VerticalWorks · 2018-03-16T15:56:33Z

For me, I just added the following to my Angular-cli.json file, and it worked... remember, WebPack needs to know "where and what to include :) Be sure to restart "ng serve"
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

ManojSonowal · 2018-04-07T11:37:56Z

Solution of manojsgh worked for me too.

mutantkeyboard · 2018-04-13T08:59:33Z

I have resolved this by reading the link provided by @filipesilva

nadyscoolcodes · 2018-04-27T10:56:36Z

Thanks @alextait1 !! Your method worked for me.......

irfanakbar47 · 2018-05-01T20:35:50Z

Restart npm server

nadyscoolcodes · 2018-05-02T02:39:19Z

Okay

…

On Wed 2 May, 2018, 2:06 AM irfanakbar47, ***@***.***> wrote: Restart npm server — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3411 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYVbk57P9H1m-pwjj_ClfjoMvHXUa6onks5tuMdGgaJpZM4LEpPr> .

STEPHINRACHEL · 2018-05-08T09:44:30Z

restart the application using ng serve

Yi98 · 2018-06-18T05:37:02Z

@alextait1 Works like a charm. Thank you so much :)

zahasoftware · 2018-07-28T21:22:24Z

manojsgh solution works for me, I was trying the filipesilva solution but wihout results.

francesfang · 2018-08-03T18:56:16Z

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

alalicon577 · 2018-09-08T20:39:20Z

add to styles.css
@import "~bootstrap/dist/css/bootstrap.min.css";

yawningphantom · 2018-09-09T07:09:29Z

I can confirm that this issue is because of bootstrap 4. I am using angular 6 and was trying to include bootstrap v4 it wasn't showing up and then I downgraded to bootstrap v3 and it works like a charm. Simply use the command
npm install bootstrap@3 --save
to downgrade to bootstrap v3

echosanjeet · 2018-09-10T11:00:10Z

try removing single dot (.). See below. This worked for me.
"./node_modules/bootstrap/dist/css/bootstrap.min.css"

navgag33 · 2018-10-14T17:42:36Z

Ran into the same issue and had to downgrade to version 3 of bootstrap and it worked.

robeverett · 2018-10-22T18:10:24Z

I also have the same issue, however I am using version 4.1.3 as I want to be up to date. (The instructor is still using 3.3.7) I am following a Udemy tutorial.

In my angular.json, I have this:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.less"
],

because at some point I would like the flexibility of .less.

robeverett · 2018-10-22T18:21:15Z

Downgrading to version 3 isn't a solution and is absurd.
Imagine if as a professional developer you got told: "Oh our API won't work with .net core, so you'll have to re-write that app that you've just spent the last 6 months building to perfection in .net 4.5 !" :(

robeverett · 2018-10-23T07:28:46Z

The only way I can get to use the version 4 + styles is to use a CDN link at the top of app\src\styles.css:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

That's great when on occasions the bootstrapcdn server is down and all my users see an unstyled app - very professional.

Could someone PLEASE explain why 4 + can't be used the same as 3.3.7 upwards, WHAT is broke and WHY ?

robeverett · 2018-10-23T08:47:42Z

https://www.techiediaries.com/angular-bootstrap/

That link should clear up a lot of confusion.

navgag33 · 2018-10-28T09:32:46Z

Thank You so Much @dotNetAthlete, So cut to the chase, The only thing we need to do is to use the latest Bootstrap:
Add @import "~bootstrap/dist/css/bootstrap.css" to your styles.css in the src folder and you are good to go.

P.S : Still need to Install bootstrap first

:-)

vantive · 2018-11-15T11:35:21Z

I checked all the options and tried each suggested here in the post. But only working option is by uninstalling 4.* version by (npm uninstall bootstrap --save) and next by installing bootstrap 3.3.7 (npm install bootstrap@3.3.7 --save)..

**

it worked like charm.

**

for other advanced members/users who dont want to disturb their existing version they have to deal with some intricacies of how to deal with such issues (for e.g. popper.js, jquery.js versions etc) and also know how to map these with the current bootstrap version.. then it might work!

but for me the priority to was to make my learning curve smooth and dont get mingled in these intricacies for now.

all the best!

happy coding.

sanitreddy · 2018-11-16T16:52:38Z

After installing the bootstrap dependency into your project just plug in the below code in your angular.json file.

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

Using,
Angular CLI: 6.2.7
Node: 8.11.1
OS: win32 x64
Angular: 6.1.10

Hope this is helpful!

ndibrithalea · 2018-12-17T06:06:25Z

Had thesame problem.
Go to your angular.json And do this:
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
2- Close you server and launch it again: ng-serve.

rahuls360 · 2018-12-25T06:35:13Z

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

Houuse · 2019-01-07T16:17:00Z

don't work until downgrade ,
best solution Uninstall angular -> install react -> enjoy

arif7503 · 2019-05-14T22:06:56Z

Just put

"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.js"
],

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

Hope that it would work :)

bhavinshiroya1994 · 2019-06-11T07:15:28Z

same issue please let me know if any one getting solution.

nenadbulatovic · 2019-07-17T20:15:38Z

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.

Anatoly03 · 2019-08-11T11:43:44Z

I'm inputting all 3 scripts and the bootstrap styling inside the index.html, same error.

MohamedAbdeljelil · 2019-08-19T09:40:57Z

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.

Thanks i have the same problem and it's work now

angular-automatic-lock-bot · 2019-10-08T08:02:38Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

hansl assigned filipesilva Dec 5, 2016

hansl added needs: investigation Requires some digging to determine if action is needed type: bug/fix labels Dec 5, 2016

filipesilva closed this as completed May 22, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 8, 2019

Bootstrap styles not loading #3411

Bootstrap styles not loading #3411

Comments

Harsangeet commented Dec 5, 2016

hansl commented Dec 5, 2016

rolandoldengarm commented Dec 6, 2016

vfedoriv commented Dec 11, 2016

yanxiaodi commented Dec 31, 2016

lukas-kloeppel commented Jan 9, 2017

Dinistro commented Feb 27, 2017

Dinistro commented Feb 28, 2017

lukeguzeng commented Mar 15, 2017

filipesilva commented May 22, 2017

Zhuinden commented Aug 10, 2017 • edited Loading

filipesilva commented Aug 21, 2017

alextait1 commented Dec 6, 2017

faizy6641 commented Feb 19, 2018

manojsgh commented Feb 23, 2018 • edited Loading

shireefkhatab commented Mar 14, 2018 • edited Loading

VerticalWorks commented Mar 16, 2018

ManojSonowal commented Apr 7, 2018

mutantkeyboard commented Apr 13, 2018

nadyscoolcodes commented Apr 27, 2018

irfanakbar47 commented May 1, 2018

nadyscoolcodes commented May 2, 2018 via email

STEPHINRACHEL commented May 8, 2018

Yi98 commented Jun 18, 2018

zahasoftware commented Jul 28, 2018

francesfang commented Aug 3, 2018

alalicon577 commented Sep 8, 2018

yawningphantom commented Sep 9, 2018

echosanjeet commented Sep 10, 2018 • edited Loading

navgag33 commented Oct 14, 2018

robeverett commented Oct 22, 2018

robeverett commented Oct 22, 2018 • edited Loading

robeverett commented Oct 23, 2018

robeverett commented Oct 23, 2018

navgag33 commented Oct 28, 2018 • edited Loading

:-)

vantive commented Nov 15, 2018

sanitreddy commented Nov 16, 2018 • edited Loading

ndibrithalea commented Dec 17, 2018 • edited Loading

rahuls360 commented Dec 25, 2018

Houuse commented Jan 7, 2019

arif7503 commented May 14, 2019

bhavinshiroya1994 commented Jun 11, 2019 • edited Loading

nenadbulatovic commented Jul 17, 2019 • edited Loading

Anatoly03 commented Aug 11, 2019

MohamedAbdeljelil commented Aug 19, 2019

angular-automatic-lock-bot bot commented Oct 8, 2019

Zhuinden commented Aug 10, 2017 •

edited

Loading

manojsgh commented Feb 23, 2018 •

edited

Loading

shireefkhatab commented Mar 14, 2018 •

edited

Loading

echosanjeet commented Sep 10, 2018 •

edited

Loading

robeverett commented Oct 22, 2018 •

edited

Loading

navgag33 commented Oct 28, 2018 •

edited

Loading

sanitreddy commented Nov 16, 2018 •

edited

Loading

ndibrithalea commented Dec 17, 2018 •

edited

Loading

bhavinshiroya1994 commented Jun 11, 2019 •

edited

Loading

nenadbulatovic commented Jul 17, 2019 •

edited

Loading