I am working on a page that uses Bootstrap 3. This page has a navbar across the top. The navbar is divided into three sections.
  • The first third is a drop down
  • The second third has the brand
  • The third part has some links.

I am trying to center the brand in the middle of the second part. However, I'm having some challenges doing that. I've been working from this Fiddle. The relevant code looks like this:

<div class="container" style="background-color:green; color:#fff;">
  <nav class="navbar">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">My Choice</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Another Choice</a></li>

    <div>My App</div>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" class="link">Support</a></li>
      <li><a href="#" class="link">Help</a></li>
How do I center the brand in the navbar?