How to Center Twitter-Bootstrap 3 Navbar Links

How can I center Twitter-Bootstrap 3 navbar links?

Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Demo: http://bootply.com/72519

---

Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

---

Also see
Bootstrap NavBar with left, center or right aligned items

Center Navbar in Bootstrap

How do I center these Twitter bootstrap 3 navbar links?

The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused.

However, you can achieve the effect you are looking for by adding the following css:

.navbar-nav.nav-justified > li{
    float:none;
}

nav-justifiednow plays nice with navbar-nav:

<ul class="nav navbar-nav nav-justified">

See updated jsFiddle.

How do I center these Twitter bootstrap 3 navbar links?

The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused.

However, you can achieve the effect you are looking for by adding the following css:

.navbar-nav.nav-justified > li{
    float:none;
}

nav-justifiednow plays nice with navbar-nav:

<ul class="nav navbar-nav nav-justified">

See updated jsFiddle.

Bootstrap 3: How to make a centered navbar

This should be exactly what you are looking for.

Here is a jsFiddle Demo

If you want this as a fixed-footer, just add navbar-fixed-bottom class to the <nav class="navbar navbar-default" role="navigation"> element.

HTML

<nav class="navbar navbar-default" role="navigation">
   <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>

   <div class="collapse navbar-collapse  navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
  </div>
</nav>

CSS

@media (min-width: 768px){
    .navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

Center the nav in Twitter Bootstrap

Possible duplicate of Modify twitter bootstrap navbar.
I guess this is what you are looking for (copied):

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}

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

As stated in the linked answer, you should make a new class with these properties and add it to the nav div.

Centering navbar links in bootstrap

You can achieve it using flexbox.

Here's a working pen I created: http://codepen.io/anon/pen/bwbpNx

CSS

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

I think this is one of the proper way to do it. So that, if you add another link. It will remain at center. Hope it helps. Cheers!

---

Related Topics