How do I center three links in a navbar?

Question

I have the following navbar provided by Bootstrap

The code for the navbar is:

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}

.navbar-nav>li {
 float: left;
 }

.nav>li {
position: relative;
display: block;
}


.navbar-nav {
float: left;
margin: 0;
}

I want to center the 3 links. My attempt was to do

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

I want to make the 3 links center but it did not seem to work with text-align. I have tried making the margin-left and margin-right = 0 but that did not work either.

Any help is appreciated.

Possible duplicate of [Center content in responsive bootstrap navbar](http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar) — Sagar Kodte, Jun 20 '16 at 06:09

score 0 · Accepted Answer · answered Jun 19 '16 at 22:16

HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="pull-left"><a href="#">Dashboard</a></li>
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
        <li class="social pull-right"><a href="#">Social Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS:

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

https://codepen.io/davidcochran/pen/rcHae

score 0 · Answer 2 · answered Jun 19 '16 at 22:17

0

you have to do some changes in the css.

Keep this

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

Remove float from .nav-bar-nav > li and add this

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

answered Jun 19 '16 at 22:17

Yasir Khan

512
3
18

score 0 · Answer 3 · answered Jun 19 '16 at 22:18

What's holding you back doing this is because of .navbar-nav being floated in document. You should get rid of floating property and make it an inline element to align it centered. (inline-block)

See fiddle here

HTML

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS

.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}

.navbar-nav>li {
 float: left;
 }

.nav>li {
position: relative;
display: block;
}

.navbar {
  text-align: center;
}
.navbar-nav {
  display: inline-block;
float: none !important;
margin: 0;
}

score 0 · Answer 4 · edited May 23 '17 at 11:58

0

Add below CSS in your page

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

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

Check this Center content in responsive bootstrap navbar for more details.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 19 '16 at 22:19

Hector Barbossa

5,506
13
48
70

score 0 · Answer 5 · answered Jun 19 '16 at 23:08

#navbar {
    margin-left: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

score 0 · Answer 6 · answered Jun 20 '16 at 00:44

Here are two examples depending on how this is supposed to display on smaller devices.

Example 1: Links center above 768px (non-mobile).

@media (min-width: 768px) {
  .navbar.navbar-default {
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
        <li><a href="#">Four</a>
        </li>
        <li><a href="#">Five</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Example 2: Centered for for all viewports

.navbar.navbar-inverse {
  text-align: center;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse" id="navbar2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
        <li><a href="#">Four</a>
        </li>
        <li><a href="#">Five</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

How do I center three links in a navbar?

6 Answers6