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/
The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}