Center an element in Bootstrap 4 Navbar
Updated for Bootstrap 4.1+
Bootstrap 4 the navbar now uses flexbox so the Website Name
can be centered using mx-auto
. The left and right side menus don't require floats.
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar center with mx-auto
Demo
If the Navbar only has a single navbar-nav
, then justify-content-center
can also be used to center.
EDIT
In the solution above, the Website Name
is centered relative to the left and right navbar-nav
so if the width of these adjacent navs are different the Website Name
is no longer centered.
To resolve this, one of the flexbox workarounds for absolute centering can be used...
Option 1 - Use position:absolute;
Since it's ok to use absolute positioning in flexbox, one option is to use this on the item to be centered.
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Navbar center with absolute position Demo
Option 2 - Use flexbox nesting
Finally, another option is to make the centered item also display:flexbox
(using d-flex
) and center justified. In this case each navbar component must have flex-grow:1
As of Bootstrap 4 Beta, the Navbar is now display:flex
. Bootstrap 4.1.0 includes a new flex-fill
class to make each nav section fill the width:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
<div class="container justify-content-center">
<ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
<ul class="nav navbar-nav flex-fill justify-content-center">
<li class="nav-item"><a class="nav-link" href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav flex-fill w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar center with flexbox nesting Demo
Prior to Bootstrap 4.1.0 you can add the flex-fill class like this...
.flex-fill {
flex:1
}
As of 4.1 flex-fill
is included in Bootstrap.
Bootstrap 4 Navbar center demos
More centering demos
Center links on desktop, left align on mobile
Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
How move 'nav' element under 'navbar-brand' in my Navbar
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:
<nav class="navbar bg-faded">
<div class="container">
<ul class="nav navbar-nav pull-sm-left">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-logo mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Brand</a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
And CSS:
.navbar-logo {
width: 90px;
}