Center the nav in Twitter Bootstrap

Question

I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions. I don't want to use offsets to push it over or margin-left as this would just screw it up in different browser widths. This is the typical bar that I am messing around with but the ul always winds up left aligned.

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->

jsfiddled: [problem](http://jsfiddle.net/7cGea/). top [answer](http://jsfiddle.net/7cGea/1/) (Bootstrap 2.3.2) — Jake Berger, Jan 03 '14 at 12:34

score 57 · Accepted Answer · edited May 23 '17 at 11:59

57

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.

edited May 23 '17 at 11:59

Community

1
1

answered Jun 07 '12 at 21:03

John Klakegg

943
9
19

This works great but I need it to shut off for all widths apart from the desktop. Just set this stuff to :none on the Media Queries? – Jordan Jul 10 '13 at 04:09
1

If you want this to work for Bootstrap 3; change `.navbar-inner` to `.navbar-collapse` – darronz Mar 03 '15 at 06:30

Carol Skelly · Answer 2 · 2015-04-28T11:04:49.377

For anyone needing this for Bootstrap 3, it is now much easier.

The new nav-justified class can be used to center all of the navbar links..

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <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><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Or with a little CSS you can center just the brand/logo, and keep the left/right links separate..

http://www.bootply.com/3iSOTAyumP

score 5 · Answer 3 · answered Jun 07 '12 at 20:53

5

You can make the .navbar fixed width, then set it's left and right margin to auto.

Demo

.navbar{
    width: 80%;
    margin: 0 auto;
}

answered Jun 07 '12 at 20:53

FarFigNewton

7,108
13
50
77

3

that centers the navbar but not the content in the navbar – pelachile Jun 07 '12 at 21:09
simple. this is the one that works for me, the other one didn't. – Joris Jul 18 '13 at 06:34

score 0 · Answer 4 · answered Nov 02 '14 at 14:00

0

http://www.bootply.com/3iSOTAyumP in this example the button for collapse was not clickable because the .navbar-brand was in front.

http://www.bootply.com/RfnEgu45qR there is an updated version where the collapse buttons is actually clickable.

answered Nov 02 '14 at 14:00

moryde

61
5

score 0 · Answer 5 · edited Jan 21 '15 at 20:26

0

.navbar-right { 
    margin-left:auto;
    margin-right:auto; 
    max-width :40%;   
    float:none !important;
}

just copy this code and change max-width as you like

edited Jan 21 '15 at 20:26

Kevin Brown-Silva

40,873
40
203
237

answered Jan 21 '15 at 19:52

Medhat Mahmoud

1

score 0 · Answer 6 · answered Jun 19 '15 at 17:14

I prefer this :

<nav class="navbar">
  <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
    <!-- this element is on the center of the nav, visible only on -md and -lg -->
    <a></a>
  </div>

  <div class="container-fluid">
    <!-- ...things with your navbar... -->
      <div class="visible-xs visible-sm">
        <!-- this element will be hidden on -md and -lg -->
      </div>
    <!-- ...things with your navbar... -->
  </div>
</nav>

The element is perfectly centered, and will be hidden on some screen sizes (there was no place left on -xs and -sm for me for example). I get the idea from Twitter's actual navbar

score 0 · Answer 7 · answered Nov 18 '16 at 02:38

Code used basic nav bootstrap

<!--MENU CENTER`enter code here` RESPONSIVE -->

  <div class="container-fluid">
        <div class="container logo"><h1>LOGO</h1></div>
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><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" id="defaultNavbar2">
            <ul class="nav nav-justified" >
              <li><a href="#">Home</a></li>
              <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><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  <!-- END MENU-->

score 0 · Answer 8 · answered Jun 10 '17 at 15:41

For Bootstrap v4 check this:

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

only add class to ul.pagination:

<nav">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Center the nav in Twitter Bootstrap

8 Answers8

Linked