CODEWITHSUNDEEP
angularbootstrap-4
Vagabond251
Vagabond251

Reputation: 63

Bootstrap Images and elements not rendering when using Angular

I am using the latest version of Bootstrap and Angular and am taking an online course in Angular currently.

I'm following the examples to the letter but there is a difference between what shows up in the instructors videos and what shows up in my browser. For example, with this code:

<ul class="nav nav-pills">
<li [class.active]="viewMode == 'map'"><a (click)="viewMode = 'map'">Map View</a></li>
<li [class.active]="viewMode == 'list'"><a (click)="viewMode = 'list'">List View</a></li>
</ul>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>

I get an output of:

enter image description here

When the instructor enters the code he gets:

enter image description here

Did I download the wrong package of Bootstrap? As I understand it the class "nav nav-pills" is what should make it display the way the instructor has it.

Here is what my HTML looks like after adding the Bootstrap Schema:

enter image description here

Upvotes: 0

Views: 85

Answers (2)

berkobienb
berkobienb

Reputation: 714

In your example add these classes

nav-item to the li elements
nav-link to the a tags

Like in this example:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Upvotes: 1

B45i
B45i

Reputation: 2601

add Angular Bootstrap schema to your project using this angular-cli command:

ng add @ng-bootstrap/ng-bootstrap

Upvotes: 1

Related Questions