title: Bootstrap 4 navbar appearing vertically not horizontally
body: <p>I have built a Navbar exactly how it has been done on a tutorial yet somehow my navbar appears vertically when it should appear horizontally. Any ideas on how to fix this problem? Thanks in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-fixed-top navbar-light bg-faded"&gt;
      &lt;div class='container'&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class='nav-item'&gt;
                  &lt;a class='nav-link' routerLink="/home" routerLinkActive="active"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class='nav-item'&gt;
                  &lt;a class='nav-link' routerLink="/documents" routerLinkActive="active"&gt;Docs&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;div ngbDropdown class="d-inline-block dropdown-links"&gt;
                      &lt;button class="btn btn-outline-primary" id="proposalDropdown" ngbDropdownToggle&gt;
                          Proposals
                      &lt;/button&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="proposalDropdown"&gt;
                          &lt;a class="dropdown-item" routerLink="/proposals" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true}"&gt;Proposals&lt;/a&gt;
                          &lt;a class="dropdown-item" routerLink="/proposals/new" routerLinkActive="active"&gt;New Proposal&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>