Click the hyperlinks to view the HTML
By @okpaul
<nav class="navbar navbar-light bg-light justify-content-center shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> </nav>
<nav class="navbar navbar-light bg-light justify-content-center shadow mb-5"> <a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/150" width="150" height="30" class="d-inline-block align-top" alt=""> </a> </nav>
<nav class="navbar navbar-light bg-light justify-content-center shadow mb-5"> <a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/150" width="30" height="30" class="d-inline-block align-top" alt=""> Branding </a> </nav>
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-between shadow mb-5"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar4"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse w-50 order-1 order-md-0" id="navbar4"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link pl-0" href="#">Menu <span class="sr-only">Menu</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> <a href="#" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Branding</a> <div class="navbar-collapse collapse w-50 order-2"> <ul class="nav navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-rss-square"></i></a></li> <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-rss-square"></i></a></li> </ul> </div> </div> </nav>
<nav class="navbar navbar-light bg-light shadow mb-5"> <a class="navbar-brand" href="#">Branding 1</a> </nav>
<nav class="navbar navbar-light bg-light shadow mb-5"> <a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/150" width="150" height="30" class="d-inline-block align-top" alt=""> </a> </nav>
<nav class="navbar navbar-light bg-light shadow mb-5"> <a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/150" width="30" height="30" class="d-inline-block align-top" alt=""> Branding </a> </nav>
<nav class="navbar bg-light navbar-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar8" aria-controls="navigations-06" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar8"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a class="nav-link active" href="#">Menu<span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <a class="btn btn-outline-primary" href="#">Sign up</a> <form class="my-2"> <input class="form-control" type="text" placeholder="Search"> </form> </div> </nav>
<nav class="navbar navbar-light bg-light w-100 shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <div class="d-flex align-items-center"> <div class="mr-3"><a class="text-muted" href="#">English</a><small class="px-2 text-muted">|</small><a href="#">French</a></div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9" aria-controls="navigations-07" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> </div> <div class="collapse navbar-collapse" id="navbar9"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a class="nav-link active" href="#">Menu<span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow mb-5"> <a href="#" class="navbar-brand"> Branding </a> <button type="button" name="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar10"> <span class="navbar-toggler-icon"></span> </button> <ul class="navbar-nav collapse navbar-collapse" id="navbar10"> <li class="nav-item"> <a href="#" class="nav-link"> Menu </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> Menu </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Link 1 </a> <a class="dropdown-item" href="#"> Link 2 </a> <a class="dropdown-item" href="#"> Link 3 </a> </div> </li> </ul> </nav>
<nav class="navbar navbar-expand-lg bg-light navbar-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar11" aria-controls="navigations-04" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar11"> <div class="d-flex flex-column flex-lg-row align-items-start justify-content-between w-100"> <ul class="navbar-nav order-2 order-lg-1"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> </div> </nav>
<nav class="navbar navbar-expand-lg bg-light navbar-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar12" aria-controls="navigations-04" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar12"> <div class="d-flex flex-column flex-lg-row align-items-start justify-content-between w-100"> <ul class="navbar-nav order-2 order-lg-1 ml-auto"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar13" aria-controls="navigations-08" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar13"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link active" href="#">Menu<span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <a class="btn btn-outline-primary mt-2 mt-md-0 ml-lg-3" href="#">Sign up</a> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow mb-5"> <a class="navbar-brand col-4 pl-0 mr-0" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar14"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse justify-content-md-center col-8 px-0" id="navbar14"> <ul class="navbar-nav col-6 justify-content-center"> <li class="nav-item"><a class="nav-link active" href="#">Menu<span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <div class="col-6 text-lg-right px-0"><a class="btn btn-outline-primary mt-2 mt-lg-0 mr-0" href="#">Sign up</a></div> </div> </nav>
<nav class="navbar navbar-expand-lg bg-light navbar-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbar15" aria-controls="navigations-04" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar15"> <div class="d-flex flex-column flex-lg-row align-items-start justify-content-between w-100"> <ul class="navbar-nav order-2 order-lg-1"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <ul class="navbar-nav order-1 order-lg-2"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navigations-headers-04" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Your Account</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navigations-headers-04"><a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Logout</a></div> </li> </ul> </div> </div> </nav>
<nav class="navbar navbar-expand-md bg-light navbar-light shadow mb-5"> <a class="navbar-brand" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar16" aria-controls="navigations-05" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar16"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a class="nav-link active" href="#">Menu<span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <form class="form-inline my-2 my-md-0"> <input class="form-control" type="text" placeholder="Search"> </form> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow mb-5"> <a class="navbar-brand d-lg-none" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar17" aria-controls="navigations-10" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar17"> <div class="d-flex w-100 flex-column flex-lg-row justify-content-beetween align-lg-items-center"> <a class="navbar-brand d-none d-lg-block col-4 mr-0 pl-0" href="#">Branding</a> <ul class="navbar-nav mx-lg-auto col-4 justify-content-center"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> <ul class="navbar-nav col-4 justify-content-end pr-0"> <li class="nav-item active"><a class="nav-link" href="#"><img src="https://via.placeholder.com/24" alt=""></a></li> <li class="nav-item"><a class="nav-link" href="#"><img src="https://via.placeholder.com/24" alt=""></a></li> <li class="nav-item"><a class="nav-link" href="#"><img src="https://via.placeholder.com/24" alt=""></a></li> </ul> </div> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow mb-5"> <a class="navbar-brand d-lg-none" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar18" aria-controls="navigations-10" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar18"> <div class="d-flex w-100 flex-column flex-lg-row justify-content-between align-lg-items-center"> <ul class="navbar-nav mx-lg-auto col-12 justify-content-between"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> </div> </nav>
<nav class="shadow"> <div class="bg-light p-4 d-none d-lg-block"> <div class="navbar-brand">Branding</div> </div> <div class="navbar navbar-expand-lg navbar-light shadow mb-5"> <a class="navbar-brand d-lg-none" href="#">Branding</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar19" aria-controls="navigations-10" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbar19"> <div class="d-flex w-100 flex-column flex-lg-row justify-content-between align-lg-items-center"> <ul class="navbar-nav mx-lg-auto col-12 justify-content-between"> <li class="nav-item"><a class="nav-link active" href="#">Menu <span class="sr-only">(current)</span></a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a> <div class="dropdown-menu"><a class="dropdown-item" href="#">Dropdown Menu</a><a class="dropdown-item" href="#">Dropdown Menu</a></div> </li> </ul> </div> </div> </div> </nav>