How to center Bootstrap navigation items

Question

I can't seem to figure out how to center the navigation items. I can place them either to the left or right but not center. Is there a simple work around?

  <!-- Navigation -->
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Mobile navigation button --> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <!-- Navigation items -->
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>  
    </div>
  </div>

I've tried a few things but they're a little sloppy and caused some issues with mobile version. I'm looking for something a little more proper.

@UnknownOctopus It's all bootstrap. I tried a few things with some custom css that didn't work. — b4n4n4, Aug 10 '15 at 03:33
This thread should help: http://stackoverflow.com/questions/10568103/modify-twitter-bootstrap-navbar — James Ives, Aug 10 '15 at 03:34
@b4n4n4 u wana put the dropdown nav links in center or the nav icon in center? — Shehary, Aug 10 '15 at 03:44
@Shehary I'd like the keep the mobile version of the navigation the same, everything to the right. I want the desktop version of the navigation to be centered though. — b4n4n4, Aug 10 '15 at 03:49

score 1 · Answer 1 · edited May 23 '17 at 12:08

1) Use <ul class="nav nav-justified"... for the menu container.

2) Look at this codepen source:

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

.navbar-nav > li
{
    float: none;
    display: inline-block;
}

3) Read the answer right there

There are three different ways to do something like You want, choose one.

You could easily find your answer, please try to do this alone next time, bro.

score 0 · Answer 2 · answered Aug 10 '15 at 04:04

0

You could also use some custom CSS via flexbox.

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    float: none; // overwrites Bootstrap's float value
}

answered Aug 10 '15 at 04:04

Jack Kinsey

718
1
8
20

score 0 · Answer 3 · answered Aug 10 '15 at 05:00

0

Try this one

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

.navbar-nav > li
{
    float: none;
    display: inline-block;
}
.navbar-nav > li a{
    text-decoration:none;
    padding-left:15px;
}

answered Aug 10 '15 at 05:00

Dhaval Gadher

72
1
8

score 0 · Accepted Answer · answered Aug 14 '15 at 08:59

I believe you forgot to add or edit.

On your Bootstrap.css go find this class and edit on text-align:center. This will make your text navbar be centerized.

.navbar.navbar-collapse{

text-align: center;

}

If you still don't get it. You can take a look my example that i do on Bootply.

HTML

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>

        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

 </div>

CSS

   @media (min-width: 620px) {
        .navbar .navbar-nav {
            display: inline-block;
            float: none;
        }

        .navbar .navbar-collapse {
            text-align: center;
        }
    }

DEMO

How to center Bootstrap navigation items

4 Answers4