Bootstrap Center Navbar Items
You will need to modify some CSS rules for Navbar component. So add a class center
to nav.navbar
and the following rules:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
Working demo (Bootstrap 3.3.7)
Bootstrap: center some navbar items
You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-block
route to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:
.nav.nav-center {
margin:0;
float:none;
}
.navbar-inner{
text-align:center;
}
With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle example to show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
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
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
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>
Centering a Navbar: Bootstrap 4
Remove the ml-auto
CSS class from the ul
tag.
Add this in CSS
.navbar-brand {
position: absolute !important;
}
Related Topics
How to Hide Collapsible Bootstrap Navbar on Click
Google Chrome Printing Page Breaks
Justify the Last Line of a Div
How to Hover Over One Element and Affect a Different Element
Why Does Order of Transforms Matter? Rotate/Scale Doesn't Give the Same Result as Scale/Rotate
How to Style Icon Color, Size, and Shadow of Font Awesome Icons
Adjust List Style Image Position
How to Make 3-Corner-Rounded Triangle in Css
How to Change Colour of Blue Highlight on Select Box Dropdown
How to Resize an Image Dynamically With CSS as the Browser Width/Height Changes
Difference Between @Import and Link in Css
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
Changing Background Image With Css3 Animations
See :Hover State in Chrome Developer Tools
Black Transparent Overlay on Image Hover With Only Css