Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?

Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.

<div class="navbar navbar-fixed-top navbar-custom ">   <div class="container" >     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>     </div>     <div class="collapse navbar-collapse">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Home</a></li>         <li><a href="#about">Menu Item 1</a></li>         <li><a href="#contact">Menu Item 2</a></li>         <li><a href="#about">Menu Item 3</a></li>       </ul>       <ul class="nav navbar-nav navbar-right">         <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>       </ul>     </div>   </div> </div> 
like image 700
Aliv Avatar asked Nov 01 '13 18:11

Aliv


Video Answer


2 Answers

2021 Update

Bootstrap 5 (beta)

Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of "left" and "right" has been replaced with "start" and "end". Therefore the margin utilities changed for Bootstrap 5 beta:

  • ml-auto => ms-auto
  • mr-auto => me-auto

Also note that data-toggle and data-target have changed too:

  • data-toggle => data-bs-toggle
  • data-target => data-bs-target

Navbar Demo for Bootstrap 5

Bootstrap 4

Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. Here are updated examples for left, right and center in the Bootstrap 4 Navbar, and many other alignment scenarios demonstrated here.

The flexbox, auto-margins, and ordering utility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don't use the grid classes (row,col) for the Navbar.

Here are various examples...

Left, center(brand) and right links:

enter image description here

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

http://codeply.com/go/qhaBrcWp3v


Another BS4 Navbar option with center links and overlay logo image:

center links and overlay logo image

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">     <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">         <ul class="navbar-nav ml-auto text-center">             <li class="nav-item active">                 <a class="nav-link" href="#">Link</a>             </li>         </ul>     </div>     <div class="mx-auto my-2 order-0 order-md-1 position-relative">         <a class="mx-auto" href="#">             <img src="//placehold.it/120/ccff00" class="rounded-circle">         </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 dual-collapse2 order-2 order-md-2">         <ul class="navbar-nav mr-auto text-center">             <li class="nav-item">                 <a class="nav-link" href="#">Link</a>             </li>         </ul>     </div> </nav> 

Or, these other Bootstrap 4 alignment scenarios:

brand left, dead center links, (empty right)

Navbar brand left, dead center links


brand and links center, icons left and right

enter image description here


More Bootstrap 4 examples:

toggler left on mobile, brand right
center brand and links on mobile
right align links on desktop, center links on mobile
left links & toggler, center brand, search right


Also see: Bootstrap 4 align navbar items to the right
Bootstrap 4 navbar right align with button that doesn't collapse on mobile
Center an element in Bootstrap 4 Navbar


Bootstrap 3

Option 1 - Brand center, with left/right nav links:

enter image description here

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>     </button>       </div>   <a class="navbar-brand" href="#">Brand</a>   <div class="navbar-collapse collapse">     <ul class="nav navbar-nav navbar-left">         <li><a href="#">Left</a></li>         <li><a href="#about">Left</a></li>     </ul>     <ul class="nav navbar-nav navbar-right">       <li><a href="#about">Right</a></li>       <li><a href="#contact">Right</a></li>     </ul>   </div> </nav>  .navbar-brand {     position: absolute;     width: 100%;     left: 0;     text-align: center;     margin:0 auto; } .navbar-toggle {     z-index:3; } 

http://bootply.com/98314 (3.x)


Option 2 - Left, center and right nav links:

enter image description here

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>     </button>       </div>   <div class="navbar-collapse collapse">     <ul class="nav navbar-nav">         <li><a href="#">Left</a></li>     </ul>     <ul class="nav navbar-nav navbar-center">         <li><a href="#">Center</a></li>         <li><a href="#">Center</a></li>       <li><a href="#">Center</a></li>     </ul>     <ul class="nav navbar-nav navbar-right">         <li><a href="#">Right</a></li>     </ul>   </div> </nav>  @media (min-width: 768px) {   .navbar-nav.navbar-center {     position: absolute;     left: 50%;     transform: translatex(-50%);   } } 

http://bootply.com/SGYC6BWeBK

Option 3 - Center both brand and links

enter image description here

.navbar .navbar-header, .navbar-collapse {     float:none;     display:inline-block;     vertical-align: top; }  @media (max-width: 768px) {     .navbar-collapse  {         display: block;     } } 

http://codeply.com/go/1lrdvNH9GI

More examples:

Left brand, center links
Left toggler, center brand

For 3.x also see nav-justified: Bootstrap center navbar


Center Navbar in Bootstrap
Bootstrap 4 align navbar items to the right

like image 138
Zim Avatar answered Sep 21 '22 15:09

Zim


Bootstrap 4

We have many ways to align navBars Items.

For Left Align enter image description here

class = "navbar-nav mr-auto"

For Right Align enter image description here

class = "navbar-nav ml-auto"

For Center Align enter image description here

class = "navbar-nav mx-auto"

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="contact">Contact us</a> </li> </ul> </nav> 
like image 43
2 revs Avatar answered Sep 17 '22 15:09

2 revs