<nav class="navbar navbar-expand-md navbar-dark bg-primary”>

<a class="navbar-brand abs" href="#">Navbar 1</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target=“#collapsingNavbar">

<span class="navbar-toggler-icon"></span>

</button>

<div class="navbar-collapse collapse" id=“collapsingNavbar">

<ul class="navbar-nav “>

<li class="nav-item active">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="//codeply.com">Codeply</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#myAlert" data-toggle="collapse">Link</a>

</li>

</ul>

<ul class="navbar-nav ml-auto”>

<li class="nav-item">

<a class="nav-link" href="" data-target="#myModal" data-

toggle=“modal">About</a>

</li>

</ul>

</div>

</nav>

<nav class="navbar navbar-expand-md navbar-dark bg-dark”>

<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2”>

<ul class="navbar-nav mr-auto”>

<li class="nav-item active">

<a class="nav-link" href="#">Left</a>

</li>

<li class="nav-item">

<a class="nav-link" href="//codeply.com">Codeply</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</div>

<div class="mx-auto order-0”>

<a class="navbar-brand mx-auto" href="#">Navbar 2</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target=“.dual-collapse2">

<span class="navbar-toggler-icon"></span>

</button>

</div>

<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link" href="#">Right</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</div>

</nav>

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center”>

<a href="/" class="navbar-brand d-flex w-50 mr-auto">Navbar 3</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target=“#collapsingNavbar3">

<span class="navbar-toggler-icon"></span>

</button>

<div class="navbar-collapse collapse w-100" id=“collapsingNavbar3">

<ul class="navbar-nav w-100 justify-content-center”>

<li class="nav-item active">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="//codeply.com">Codeply</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

<ul class="nav navbar-nav ml-auto w-100 justify-content-end”>

<li class="nav-item">

<a class="nav-link" href="#">Right</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Right</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Right</a>

</li>

</ul>

</div>

</nav>

<nav class="navbar navbar-expand-sm navbar-light bg-light”>

<div class="mx-auto d-sm-flex d-block flex-sm-nowrap”>

<a class="navbar-brand" href="#">Navbar 4</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarsExample11" aria-expanded="false" aria-label="Toggle navigation”>

<span class=“navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse text-center" id=“navbarsExample11">

<ul class=“navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</div>

</div>

</nav>

<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-nowrap">

<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-

target=“#navbar5">

<span class=“navbar-toggler-icon"></span>

</button>

<span class="navbar-brand w-100">Navbar 5</span>

<div class="navbar-collapse collapse w-100 justify-content-center" id=“navbar5">

<ul class="navbar-nav mx-auto”>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Codeply</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</div>

<div class=“w-100"><!--spacer--></div>

</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="d-flex flex-grow-1">

<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on

mobile --></span>

<a class="navbar-brand d-none d-lg-inline-block" href="#">

Navbar 6

</a>

<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">

<img src="//placehold.it/40?text=LOGO" alt="logo">

</a>

<div class="w-100 text-right">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#myNavbar">

<span class="navbar-toggler-icon"></span>

</button>

</div>

</div>

<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">

<ul class="navbar-nav ml-auto flex-nowrap">

<li class="nav-item">

<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link m-2 menu-item">How We Help</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link m-2 menu-item">Blog</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link m-2 menu-item">Contact</a>

</li>

</ul>

</div>

</nav>