Bootstrap NavBar with left, center or right aligned items

Question

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 rig

Answer 1

2020 Update

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:

    

        

            

                Left
            
            

                Codeply
            
            

                Link
            
            

                Link
            
            

                Link
            
        
    
    

        Navbar 2
        
            
        
    
    

        

            

                Right
            
            

                Link
            
        
    

http://www.codeply.com/go/qhaBrcWp3v

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

    

        

            

                Link
            
        
    
    

        
            
        
        
            
        
    
    

        

            

                Link
            
        
    

Or, these other Bootstrap 4 alignment scenarios:

brand left, dead center links, (empty right)

---

brand and links center, icons left and right

---

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:

  

    
      
      
      
        
  
  Brand
  

    

        
Left
        
Left
    
    

      
Right
      
Right
    
  


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

  

    
      
      
      
        
  
  

    

        
Left
    
    

        
Center
        
Center
      
Center
    
    

        
Right
    
  


@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

.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