Bootstrap is not working on this component - html

Question

The bootstrap is applied on the search button and the shopping cart icon but not the rest. The bootstrap does not work on the nav bar. Not sure if its just a typo problem but I got it to work earlier and then it crashed
<div class="myclass">
<nav id="myid" class="navbar navbar-dark bg-primary navbar-fixed-top" style="background-color: #171d20; height: 60px">
<form id="page" class="form-inline">
<ul class="nav navbar-nav">
<li><a class="hello" routerLink="Userlogin/home" href="">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Departments </a>
<ul class="dropdown-menu">
<li>department 1</li>
<li>department 2</li>
<li>department 3</li>
</ul>
</li>
<li (click)="onLogin()" *ngIf="!isLoggedIn">
<a routerLink="/Userlogin" class="hello" href="#">Login & Signup</a>
</li>
<li><a routerLink="/profile" class="hello" href="#">Profile</a></li>
<li *ngIf="isLoggedIn" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ username }}
</a>
<ul class="dropdown-menu">
<li><a routerLink="/Userlogin/orders" href="#2">Orders</a></li>
<li><a (click)="onLogout()">Logout</a></li>
</ul>
</li>
<li><a routerLink="Userlogin/cart" class="hello" href="#"> Cart</a></li>
<li><a routerLink="/login" class="hello" href="#">Admin</a></li>
</ul>
<div>
<a style="margin-left: 180px; margin-top: 3px; font-size: medium" class="navbar-brand">Shop24X7</a>
</div>
<input [(ngModel)]="search" name="search" size="40" style="margin-top: 11px" class="form-control mr-sm-2"
type="search" placeholder="Search for product" aria-label="search" />
<button (click)="onSearch()" style="margin-top: 11px" class="btn btn-info" type="submit">
Search
</button>
<a class="nav-link" routerLink="cart" class="fa fa-shopping-cart mr-1">
<img routerLink="cart" src="https://img.icons8.com/cute-clipart/64/000000/food-cart.png" />
</a>
</form>
</nav>
<router-outlet></router-outlet>
</div>