Mimicking Bootstrap's Webpage's Navbar (with Angular) - html

Question

1. The Problem
I'm trying to mimic Bootstrap's Webpage's Navbar but I'm having no success, despite having the same classes all around. I'm also using Angular and that got me wondering if that was related to something in the TypeScript framework and not with Bootstrap itself — that is the case for the dropdown button for example.
The main issue is that the uls with the menu items and social icons are not forming different rows when the screen width is reduced.
For example, this is what I expected with my website:
And this is what I got instead:
2. The Code
I'm not using anything fancy in Angular at this point, just plain objects' properties (I've tried it with a header instead of a nav also):
<nav class="navbar navbar-expand navbar-light bg-light">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
Logo
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
</ul>
</nav>

Answer 1

Boy, do I feel stupid for this...
After a lot of time tinkering with the subelements, the mistake was at the top all along. I had accidentally copy-pasted the <nav> element at the top from another page, and, thus, it lacked the flex-column and flex-md-row classes:
<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">
Anyway, thank you very much for those who tried to help.