Align text in center of Bootstrap Nav Bar

Question

I'd like to move the link 'Getting started' to the middle of the navbar, rather than aligned to the left. How do I do this?

My jsFiddle is here .

HTML:

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-center">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Examples</li>
                        <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
                        <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
                        <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
                        <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
                        <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
                        <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
                        <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
                        <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
                        <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>                        
                        <li class="divider"></li>
                        <li class="dropdown-header">Compatibility</li>
                        <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>

    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
      </div>
</div>

Answer 1

You can center adding text-align:center to the containing parent navbar and setting the navbar you want to center to display:inline-block and removing the float:left :

.navbar-default{
  text-align:center;
}
.navbar-center{
   display: inline-block;
   float: none; 
}

Adjusted Fiddle

Answer 2

Change in css as defind in fiddle

.navbar-default .navbar-brand{
 width: 100%;
 text-align: center;
 }

Please try this demo

Answer 3

You can actually do it in a bunch of ways.

Solution 1:

One of them is to give your .navbar-brand a width of 100% and text-align: center like this:

.navbar-brand{
    width:100%;
    text-align:center;
}

Fiddle

The solution would work but has a downside as the brandname would take up all the space on the .navbar and you wouldn't be able to put a menu in there.

Solution 2:

Another solution is to give the .navbar-brand a fixed width . Having a fixed width allows us to use margin: 0 auto; which would center the div without taking up all the space like Soltuion one . But that's not all. You also have to give .navbar-header a width of 100% and position: absolute; to make sure the menu items will be visible like this:

.navbar-header{
    width: 100%;
    position: absolute;
}
.navbar-brand{
    width:142px;
    margin:0 auto !important;
    display:block;
}

Fiddle

The upside of this solution is that you can use a menu on the same line as your brand, which would be possible with Solution 1 .

The downside is that you have to give your brand a fixed width , which decreases the flexibility of the content in it.