title: Angular4 and Bootstrap 4 navbar inline-block not working
body: <p>As I write in the title, I tried to pass from Bootstrap 3 to 4 and after my update, my navbar was broken : </p>
  
  <p><a href="https://i.stack.imgur.com/IeetO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IeetO.png" alt="enter image description here"></a></p>
  
  <p>I did nothing wrong and i really can't understand why the inline-block is not working anymore. I tried every thing I found on stackOverflow about this subject and nothing happenned..</p>
  
  <p>Here is my HTML code : </p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse" role="navigation"&gt;
    &lt;div class="center-block text-center"&gt;
     &lt;button  class="collapse-btn" (click)="toggleMenu()"&gt;
       &lt;i *ngIf="!isCollapsed()" class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;
       &lt;i *ngIf="isCollapsed()" class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
     &lt;/button&gt;
    &lt;ul class="navbar-nav"&gt;
     &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="/home"&gt;Progression&lt;/a&gt;&lt;/li&gt;
     &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Activité pédagogique&lt;/a&gt;&lt;/li&gt;
     &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Evalutation&lt;/a&gt;&lt;/li&gt;
     &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Synthèse&lt;/a&gt;&lt;/li&gt;
     &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Certification&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Thanks for your help.</p>