Center content in responsive bootstrap navbar
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
http://jsfiddle.net/bdd9U/2/
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
How to center nav-items in Bootstrap?
Use the flexbox and margin utils responsively...
Bootstrap 4 alpha 6
http://codeply.com/go/YvzHvQQRAs (center brand & links)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</nav>
Bootstrap 4.1
https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)
EDIT..
The answer is still basically the same. Use mx-auto to center.
http://codeply.com/go/mycC5z8lpJ (center links, brand left)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8
Other Bootstrap 4 Navbar alignment examples
Also see...
Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left
How to align center navbar with only bootstrap 4.5.3?
You should wrap the children of the nav tag in a div with classes: mx-auto and d-flex to achieve a fully centred navbar.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="mx-auto d-flex">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>How to center navbar links in Bootstrap 4
Place the mx-auto in the ul and it will center the links
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
...
<ul class="navbar-nav ml-auto mx-auto">
...
</ul>
</div>
</div>
</nav>
Here is a codepen with your example
Center an element in Bootstrap 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;
}
In Bootstrap 4, is it possible to center the navbar brand and align some text to the left of brand?
In Bootstrap 4 navbar is using flexbox. It helps in centering the barnd name or any name that you need to get centered. so the it can be centered using mx-auto. Then left right menus will not need 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="#">products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hair products</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div> </nav>
This will give you a nav bar like the image below.
Reference image from: Center an element in Bootstrap 4 Navbar
Here you can see the actual viewport center is different from the center that brand name is located at. Thats because it takes center in respective to the left and right ends of navigation bar.
The following code can be used to overcome this issue. BY using position absolute.
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%); }
Hope this helps.
Follow this link It much clearly illustrates the way to do your work.
mx-auto to center navbar- https://www.codeply.com/go/J9rL11Tf7h
Navbar center and absolute position- https://www.codeply.com/go/BC2gFdZ9fb
Related Topics
Vertically Center Text in Bootstrap Carousel
Unwanted Auto-Scrolling to Top on Input Focus, with Safari
Display:Inline-Block Not Working on Safari
Animating with Variables Angular 4
How to Create Two HTML Buttons Side by Side
Darken a Background Image Without Affecting the Text
Why Alignment Mark List Is Different on Webkit When Using :Before Height
Jsf/Facelets:CSS File Is Not Being Recognized Using <H:Outputstylesheet> Tag
How to Make <Legend> Text Wrap
Twitter-Bootstrap Closing Alert Does Not Work
How Is Bootstrap V4 Loading _Reboot.Scss
HTML Fieldset Allows Children to Expand Indefinitely
Target Safari CSS, But Not Chrome