In a Bootstrap 3 navbar when a link is active, the link background color is changed to show that its the active link. This seems to be missing in Bootstrap 4. Is there a way to show this or do I need to override the active class?
The Bootstrap 3 navbar shown below. You can see the active home link is highlighted How do I show this in Bootstrap 4.
The angular 5 code below
<div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['/page1']" (click)="navbarCollapsed = true">Page 1</a>
</li>
</ul>
</div>
Bootstrap 4 doesn't have css for active class.
So you have to add css by your self
Simply add css like
.active {
background:#4FA9DC; color:#000;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With