Center the nav in Twitter Bootstrap
Possible duplicate of Modify twitter bootstrap navbar.
I guess this is what you are looking for (copied):
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
As stated in the linked answer, you should make a new class with these properties and add it to the nav div.
Twitter 2.0 bootstrap navbar center
Breaking from the comments, using a .container-fluid
container creates the undesired effect of the navbar being stretched, this can be avoided by replacing it with a .container
fixed container instead.
twitter bootstrap -- center brand in nav bar
Couple ways to center, you might have to try each:
Setting auto-margins:
.brand { margin-left: auto; margin-right: auto; }
Or using a known width (200px example) of an absolute positioned element:
.brand { left: 50%; margin-left: -100px; }
Twitter Bootstrap - center navbar when responsive to two rows
If you want to keep menu in center avoid using float. Check if this helps you.
@media (min-width: 768px) {
.navbar-nav>li {
float: none;
display: inline-block;
}
}
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;
}
How can I center Twitter-Bootstrap 3 navbar links?
Bootstrap 3 has a nav-justified
class that can be used on nav
. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav
class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
Related Topics
CSS Expanding Based on Portrait or Landscape Screen Size
Adding CSS File to Stylesheets in Javafx
Tw Bootstrap: How to Overflow Columns
Backside-Visibility Not Working in Ie10 - Works Fine in Webkit
CSS Nth-Child Apply Odd-Even Rule But Switch Every 4 Items
How to Avoid One Word on the Last Line with CSS
CSS "D" Path - Attribute Doesn't Work in Safari, Firefox
Dynamically Define a Variable in Less CSS
Print Footer on Every Printed Page from Website, Across All Browsers (Chrome)
Prevent Children from Inheriting Rotate Transformation in CSS
Css: Disable Font Ligatures in All Browsers
How to Change the Border/Outline Color for Input and Textarea Elements in Twitter Bootstrap