CODEWITHSUNDEEP
angularangular-ui-bootstrap
HeyLameRobin
HeyLameRobin

Reputation: 331

How to properly display Bootstrap in Angular?

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: enter image description here

Instead, I got this: enter image description here

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): enter image description here enter image description here

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

enter image description here

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!

Upvotes: 0

Views: 193

Answers (1)

richlira
richlira

Reputation: 519

Try removing the “./“ at the beginning:

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

Upvotes: 1

Related Questions