Scribd
Upload
61 views

Bootstrap Navbar Alignments

The document contains the code for 6 different navbar designs with various configurations of branding, buttons, links, and responsive behaviors. Each navbar code sample demonstrates alternative ways to structure common navbar elements like branding, links, and toggling menus on different screen sizes.

Uploaded by

Dhanush kumar Sivaji
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

Bootstrap Navbar Alignments

The document contains the code for 6 different navbar designs with various configurations of branding, buttons, links, and responsive behaviors. Each navbar code sample demonstrates alternative ways to structure common navbar elements like branding, links, and toggling menus on different screen sizes.

Uploaded by

Dhanush kumar Sivaji
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<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>

You might also like