<!-- VERTICAL -->
<ul class="flex-column">
<!-- RIGHT ALIGN -->
<ul class="justify-content-end">
<!--Dropdown list item here -->
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">link 1</a>
<a href="#" class="dropdown-item">link 2</a>
<a href="#" class="dropdown-item">link 3</a>
</div>
<!--** -->
<!-- Search Form - add after /ul -->
<form class="form-inline my-2 my-lg-0">
<input type="text" class="form-control mr-sm-2" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0">Search</button>
</form>
</div>
</div>
</nav>
<!-- *** -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- SIMPLE MENU W/ nav-pills & active nav -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<!-- HORIZONTAL ALIGN -->
<ul class="justify-content-center">
<!-- nav-pills -->
<ul class="nav nav-pills">
<!--* *-->
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>