Currently, centering items in v4 is not supported, but a workaround is available:
@media (min-width: 992px) {
.navbar-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar.navbar-flex:after {
content: none;
}
}
.navbar-flex > *:last-child {
padding-left: 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-inverse navbar-flex">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
</nav>
- I introduced a custom class:
navbar-flex to the navbar
- I eliminated the
:after pseudo-element from .navbar
- This behavior is restricted to screens wider than
992px – decrease this value if necessary *(768px), but verify the fit on smaller screens
- This example utilizes the markup from v4 examples
Three elements are now included in the navbar:
- Logo: remains anchored to the left side
- Middle
.navbar-nav: centrally positioned between logo and contents of right-side container, with uniform distance from each
- Right-side container (referred to as
.inline-form in this example) can be seamlessly swapped for another .navbar-nav (customized), ensuring it sticks to the right
In your specific scenario, replace the .inline-form element (last child of .navbar) with the .navbar-nav from your inquiry (also remove the float-xs-right classes from its children); position the desired centered child within the middle .navbar-nav
If you desire the unprefixed version, here is the code:
@media (min-width: 992px) {
.navbar-flex {
display: flex;
justify-content: space-between;
}
.navbar.navbar-flex:after {
content: none;
}
}
.navbar-flex > *:last-child {
padding-left: 1rem;
}
To box it in, encapsulate it within a .container
Lastly, why title your question "Superposed nav-item right alignment" instead of "How can I center a navbar item in Bootstrap v4?"
:: }<(((*> ::