0

I know similar issues has been asked but none of them have solved my problem.

So it seems that the style is getting applied but gets instantly overwritten by something else and I can't figure out by what.

The only reference to bootstraps and styles are done in the angular.json file.

I use Angular 8 and Bootstraps 4

npm install bootstrap --save
npm install bootstrap@4 jquery --save
npm install popper.js@^1.14.3 --save

angular.json

...
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [ // changed order here as well with no effect
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.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"
            ]
          },
...

app.component.html

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>


<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>

The result in the browser looks like this: browser

the app.component.css is empty as well as any other stylesheet

Thanks

Leschge
  • 146
  • 3
  • 11
  • Does this answer your question? [How to add bootstrap in angular 6 project?](https://stackoverflow.com/questions/50290197/how-to-add-bootstrap-in-angular-6-project) – Vikas Nov 27 '19 at 14:06
  • Can you inspect using chrome tool for example and see which library or css override your css ? – Benjamin Barbé Nov 27 '19 at 14:08
  • Try inspect elements in the developers tools in browser and check if the design is being rendered or not. – Utkarsh Nov 27 '19 at 14:14
  • Can you share index.html? Also, try rebuilding it by aborting the serve process and launching it again with ng serve. Did you check if the actual module exists in the file structure? – Tobias Kaufmann Nov 27 '19 at 14:18

2 Answers2

1

Did you tried via CDN ? By adding this in your index.html ? I had a similar issue while using bootstrap via npm

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Zephyr
  • 63
  • 11
  • Might sound stupid but did you tried exit project and running back `ng serve` ? Tried without jQuery ? `npm i boostrap` – Zephyr Nov 27 '19 at 14:15
  • also tried that. I just created the entire project again. Works now. – Leschge Nov 27 '19 at 14:24
1

Have you checked that the dependencies have been added to your package.json file?

Layera
  • 226
  • 1
  • 4
  • yes the dependencies were all right. I just started a new project and now it works. Looked like something got messed up that wasn't easy to spot. – Leschge Nov 27 '19 at 14:23