I am learning Angular right now. In the tutorial, I'm supposed use Bootstrap:
<ul class="nav nav-pills">
<li class="active"><a href="">Map View</a></li>
<li><a href=""></a>List View</li>
</ul>
<div>
<div>Map View Content</div>
</div>
In order to output this:
Instead, I got this:
I can see that Bootstrap did not work. So I checked to see if Bootstrap and jQuery are installed, which they are (both in node_modules folder):
I checked to see if I imported right. I tried two ways. First, I imported Bootstrap on styles.css Like this:
@import "~bootstrap/dist/css/bootstrap.css"
It did not work. So I tried another way by adding Bootstrap and jQuery on angular.json file like this:
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
My Question is: are there any extra steps that I might be missing? I have looked at many sources already and it seems like I have everything correct. Are there better alternatives out there to get Bootstrap to display properly? I'm really confused and I would appreciate any help I can get. Thank you!
