brand logo center in navbar bootstrap 3 - twitter-bootstrap-3

Question

Is it possible in bootstrap 3 to center brand name in the middle of the menu item? For example there is four menu item, i want two items on the left side, and two on the right side and brand name in the middle of these two menu links. Thnaks in advance for the help.

Answer 1

Step 1 Wrap a <div class="pull-left"> around the two icons you want on the left
Step 2 move this div before the <a class="navbar-brand"
Step 3
Wrap a <div class="pull-right"> around the two icons you want on the right. Make sure this div follows the navbar-brand
This method can help you, however it is best if you post the relevant code here.
Hope this helps!

Answer 2

You can use the nav-justified class...
<div class="navbar">
<ul class="nav nav-justified">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Brand</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Demo: http://bootply.com/105175

Answer 3

Do it like my code. Get the anchor tag with navbar-brand out of the navbar-headerand place it after the closing div. like in the code below.
navbar code
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
</div>
</nav>
Place this code into your css file
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
mar
}
Here is the link to the working example
http://www.bootply.com/98314

Answer 4

You can use a much simpler approach too, just setting a percentage:
.navbar-brand {
position: absolute;
left: 50%;
}
Side Note: I haven't tested with IE. Usually I don't like percentages, but... it works!