Centering Navbar Content with Bootstrap - css

Question

I am working on a web page that uses Bootstrap. I am trying to add a fixed navbar. This navbar will have three sections. I want the left content to be left-aligned, the center content to be center-aligned and the right content to be aligned to the right. Basically, I need it to looks like this:
+-----------------------+-----------------------+-----------------------+
| Hello | item 1 | item 2 | contact |
+-----------------------+-----------------------+-----------------------+
In an attempt to do this, I've written the following code:
<nav class="navbar navbar-static-top" style="background-color:#000;">
<div class="navbar-brand pull-left">Hello</div>
<ul style="list-inline">
<li>item 1</li>
<li>|</li>
<li>item 2</li>
</ul>
<div class="pull-right">
contact
</div>
</nav>
The "Hello" is properly aligned. The "contact" is properly aligned. However, I can't seem to figure out how to center the ul within the navbar. Can somebody please share their CSS mojo?
Thanks!

Answer 1

You can do it using col- and text-align like this:
* {
color: #fff;
}
.list-inline {
display: inline-block;
}
.left-content{
text-align: left;
}
.center-content{
text-align: center;
padding: 15px;
}
.right-content{
text-align: right;
padding: 15px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-static-top" style="background-color:#000;">
<div class="navbar-brand left-content col-xs-2">Hello</div>
<div class="center-content col-xs-8">
<ul class="list-inline">
<li>item 1</li>
<li>|</li>
<li>item 2</li>
</ul>
</div>
<div class="right-content col-xs-2">contact</div>
</nav>
You can change the cols according to what you need, check out this fore more info http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp