How to center this bootstrap navbar?

Question

Current appearance of navbar:

Current appearance of navbar

I want it to look like this:

I want it to look like this

Text-align: center does not work. Nor justify, float, etc.

HTML

    <div class="navbar navbar-default">
      <div class="navbar-header">
      </div>
       <ul class="nav navbar-nav">
         <li class="#"><a href="#">HOME</a></li>
         <li><a href="#">ABOUT</a></li>
          <li><a href="#">PAGE</a></li>
          <li class="divider-vertical"></li>
          <li><a href="#">BLOG</a></li>
      <li><a href="#">TESTIMONALS</a></li>
      </ul>
      </div>

CSS

/* navbar */
.navbar-default {
    background-color: #15b6b8;
    border-color: #fff; 
    font-weight: bold;
    }

/* Link */
.navbar-default .navbar-nav > li > a {
    color: #fff;

}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #04cccc;
}

Instead of adding text-align-center to `.navbar .navbar-collapse` like in the duplicate, just do it to `.navbar`: http://www.bootply.com/3o368eURPZ — Pete, May 16 '17 at 09:42

score 2 · Answer 1 · answered May 16 '17 at 09:36

2

Use below css

  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
      float: none;
      display: inline-block;
  }

jsfiddle example

answered May 16 '17 at 09:36

LKG

4,152
1
11
21

1

A simple explanation wouldn't hurt any one. – Mayank Pandeyz May 16 '17 at 09:41

score 1 · Answer 2 · answered May 16 '17 at 09:37

Go through this JSFiddle

http://jsfiddle.net/bdd9U/2/

<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="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
<h1>Home</h1>

 </div>

CSS:

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

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

Why have you just copied the answer from another question? This won't fix the OPs problem as they don't have a navbar collapse — Pete, May 16 '17 at 09:41

score 0 · Answer 3 · answered May 16 '17 at 09:48

0

Add following style cases.

.navbar{
  text-align:center
}

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

Demo Click here

answered May 16 '17 at 09:48

Faizal

250
1
8

How to center this bootstrap navbar?

3 Answers3