CODEWITHSUNDEEP
csstwitter-bootstrap-3
Greg
Greg

Reputation: 61

Centering contents in a Bootstrap navbar

I'm trying to make a Bootstrap navbar that contains icons on the right and left with a centered title. I'm not able to get the text to center properly.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-header pull-left">
        <a href="#" id="navMenu" class="navbar-brand"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></a>
      </div>

      <!--  Center the contents of this element in the navbar -->
      <div class="navbar-header nav-element-center">
        <span class="h4 ">Centered Title</span>
      </div>


      <div class="navbar-header pull-right">
        <a href="#" id="navMenu" class="navbar-brand pull-right"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</nav>

test example: https://jsfiddle.net/goyosoyo/aw0219a4/

Note: I've given the divs a colorized border so that I could see what was happening.

What am I missing?

Upvotes: 0

Views: 41

Answers (1)

max
max

Reputation: 8667

You can do it like this:

HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-header pull-left">
        <a href="#" id="navMenu" class="navbar-brand"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></a>
      </div>
      <div class="navbar-header pull-right">
        <a href="#" id="navMenu" class="navbar-brand pull-right"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
      </div>
      <!--  Center the contents of this element in the navbar -->
      <div class="nav-element-center">
        <span class="h4 ">Centered Title</span>
      </div>
    </div>
  </div>
</nav>

CSS:

.nav-element-center {
  text-align: center;
  margin-top: 14px;
}

JSFIDDLE

Upvotes: 1

Related Questions