Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap styles not loading #3411

Closed
Harsangeet opened this issue Dec 5, 2016 · 42 comments

Comments

Projects
None yet
@Harsangeet
Copy link

commented Dec 5, 2016

Hi,

I followed the steps for Global Library Installation https://github.com/angular/angular-cli#global-library-installation

  1. Installed bootstrap@3.3.7
    npm install bootstrap --save

  2. 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"
    ],
  1. 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

@hansl

This comment has been minimized.

Copy link
Collaborator

commented Dec 5, 2016

@filipesilva Any idea?

@rolandoldengarm

This comment has been minimized.

Copy link

commented Dec 6, 2016

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

@vfedoriv

This comment has been minimized.

Copy link

commented Dec 11, 2016

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

@yanxiaodi

This comment has been minimized.

Copy link

commented Dec 31, 2016

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

This comment has been minimized.

Copy link

commented Jan 9, 2017

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

This comment has been minimized.

Copy link

commented Feb 27, 2017

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

This comment has been minimized.

Copy link

commented Feb 28, 2017

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.

@maxguzeng

This comment has been minimized.

Copy link

commented Mar 15, 2017

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

This comment has been minimized.

Copy link
Member

commented May 22, 2017

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

@Zhuinden

This comment has been minimized.

Copy link

commented Aug 10, 2017

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

This comment has been minimized.

Copy link
Member

commented Aug 21, 2017

@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

This comment has been minimized.

Copy link

commented Dec 6, 2017

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

@faizy6641

This comment has been minimized.

Copy link

commented Feb 19, 2018

@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

This comment has been minimized.

Copy link

commented Feb 23, 2018

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

This comment has been minimized.

Copy link

commented Mar 14, 2018

Solution 1 (with Bootstrap installed)
All you need to do is:

  1. Go to .angular-cli.json under the root directory of your angular app.

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

  1. 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:

  1. Go to styles.css under the root directory of your angular app.

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

This comment has been minimized.

Copy link

commented Mar 16, 2018

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

This comment has been minimized.

Copy link

commented Apr 7, 2018

Solution of manojsgh worked for me too.

@mutantkeyboard

This comment has been minimized.

Copy link

commented Apr 13, 2018

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

@nadyscoolcodes

This comment has been minimized.

Copy link

commented Apr 27, 2018

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

@irfanakbar47

This comment has been minimized.

Copy link

commented May 1, 2018

Restart npm server

@nadyscoolcodes

This comment has been minimized.

Copy link

commented May 2, 2018

@STEPHINRACHEL

This comment has been minimized.

Copy link

commented May 8, 2018

restart the application using ng serve

@Yi98

This comment has been minimized.

Copy link

commented Jun 18, 2018

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

@juandrn

This comment has been minimized.

Copy link

commented Jul 28, 2018

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

@francesfang

This comment has been minimized.

Copy link

commented Aug 3, 2018

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

This comment has been minimized.

Copy link

commented Sep 8, 2018

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

@yawningphantom

This comment has been minimized.

Copy link

commented Sep 9, 2018

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

This comment has been minimized.

Copy link

commented Sep 10, 2018

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

@navgag33

This comment has been minimized.

Copy link

commented Oct 14, 2018

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

@GuitarHero1969

This comment has been minimized.

Copy link

commented Oct 22, 2018

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.

@GuitarHero1969

This comment has been minimized.

Copy link

commented Oct 22, 2018

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 !" :(

@GuitarHero1969

This comment has been minimized.

Copy link

commented Oct 23, 2018

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 ?

@GuitarHero1969

This comment has been minimized.

Copy link

commented Oct 23, 2018

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

That link should clear up a lot of confusion.

@navgag33

This comment has been minimized.

Copy link

commented Oct 28, 2018

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

This comment has been minimized.

Copy link

commented Nov 15, 2018

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

This comment has been minimized.

Copy link

commented Nov 16, 2018

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

This comment has been minimized.

Copy link

commented Dec 17, 2018

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

This comment has been minimized.

Copy link

commented Dec 25, 2018

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

This comment has been minimized.

Copy link

commented Jan 7, 2019

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

@arif7503

This comment has been minimized.

Copy link

commented May 14, 2019

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

This comment has been minimized.

Copy link

commented Jun 11, 2019

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

@lwensveen

This comment has been minimized.

Copy link

commented Jun 12, 2019

Still an issue sadly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.