Пожалуйста, прочитайте документацию по миграции , чтобы выяснить разницу между bootstrap v3 и v4. Есть пара важных изменений для navbar
!
Следующее будет работать для bootstrap4 :
<nav class="navbar navbar-light navbar-expand-md">
<div class="container">
<a href="#" class="navbar-brand">Koffee</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-nav-demo">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
</ul>
</div>
</div>
</nav>
демо: https://jsfiddle.net/davidliang2008/6a3p7t2r/12/
Внесены изменения для navbar, toggler, nav, navbar-nav и т. Д. Я настоятельно рекомендую вам ознакомиться с документацией Bootstrap!