I have seen similar questions asked before, but none of the solutions provided have fixed my issue.
It appears that the styles are being applied initially but then overridden by something else, and I am unable to identify what is causing this.
The only references to Bootstrap and custom styles are made in the angular.json file.
I am using Angular 8 and Bootstrap 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": [ // tried changing the order here as well without success
"./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>
When viewed in the browser, the result looks like this: https://i.sstatic.net/aBw6s.png
The app.component.css file is empty, along with all other stylesheets.
Thank you