Center an element in Bootstrap 4 Navbar

Question

No matter what I try, I can\'t center something in Bootstrap navbar, any solutions for it?

I\'ve tried adding a div, using margin:0 auto; or marg

Answer 1

In Bootstrap 4, there is a new utility known as .mx-auto. You just need to specify the width of the centered element.

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.

Here's the HTML:

  

    

      

        Link 1
      
      

        Link 2
      
      

        Link 3
      
      

        Link 4
      
    
    

      

        Brand
      
    
    

      

        Link 5
      
      

        Link 6
      
    
  

And CSS:

.navbar-logo {
  width: 90px;
}