Currently, I am utilizing the most recent version of Bootstrap within an Angular environment. However, I have encountered an issue where the class "nav nav-pills nav-justified" does not stack the tabs properly when the screen size is reduced below 768px.
I checked out a helpful site at http://jsfiddle.net/koala_dev/73rNv/. that was mentioned in a previous post. Additionally, I visited Stack Overflow and found a solution, but unfortunately, it did not work as expected. You can view the thread here: Justify Nav-pills with Bootstrap v4
The following snippet represents the HTML code structure:
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/status-update']">Status Update</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/goal-setting']">Goal Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/meet-up']">Meet up</a>
</li>
</ul>
</div>
https://i.sstatic.net/QNkO1.png https://i.sstatic.net/2YfkE.png
I am quite perplexed as to why the code works flawlessly on http://jsfiddle.net/koala_dev/73rNv/, whereas the same implementation fails in my case. Any guidance or suggestions would be greatly appreciated.