How to center nav-items in Bootstrap?

Question

What if I want to center the nav-items (links) on the navbar according to the browser window size in Bootstrap 4. Take a look at the code:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

Now I want to center the div "navbar-nav" according to browser width. One thing that I have tried is giving it mr-auto and ml-auto which does seem to center it but not exactly. What it actually does it centers it according to the width "browser window width - logo width" . I want it centered exactly in the middle of the screen.

I have tried changing position to absolute as well but again that kind of messes up layout in collapsed mode as well.

http://jsfiddle.net/girish28892/bdd9U/1546/ check this out,might work for you — this.girish, May 02 '17 at 13:55

Carol Skelly · Accepted Answer · 2018-09-17T13:06:08.413

Use the flexbox and margin utils responsively...

Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs (center brand & links)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </div>
</nav>

Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)

EDIT..

The answer is still basically the same. Use mx-auto to center.

http://codeply.com/go/mycC5z8lpJ (center links, brand left)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8

Other Bootstrap 4 Navbar alignment examples

Also see...

Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left

Actually, your code also centers the logo which I don't want. As I said, I want to center the nav-items, not the logo when NOT in the collapsed form. And I want to center them according to browser width but margin utils center them by applying margin left from the logo. — Parker Queen, May 02 '17 at 13:19
@dmcoding .. how are they broken? The relevant code is in the answer too. — Carol Skelly, Oct 01 '20 at 14:42

score 0 · Answer 2 · answered May 02 '17 at 12:40

.navbar-nav .nav-link,
.navbar-brand {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Actually you did quite the opposite. Your code makes the logo and the nav-links centered when it is collapsed. I want only the nav-items centered when it is NOT collapsed. And I want it centered according to browser width. — Parker Queen, May 02 '17 at 12:44

score 0 · Answer 3 · answered May 02 '17 at 13:28

0

You can use this CSS:

#navbarNavAltMarkup {
  position: absolute;
  text-align: center;
}
#navbarNavAltMarkup > div {
  display: inline-block;
  width: 100%;
}
#navbarNavAltMarkup > div > a {
  display: inline;
}

It makes the container of the menu independent from its parent, gives it full width and aligns the elements inside it in the center.

https://codepen.io/anon/pen/XRggYY

answered May 02 '17 at 13:28

Johannes

64,305
18
73
130

Was working really good until I noticed that after collapsing, the navbar doesn't open when clicking the toggler. Moreover, there seems to be some extra width in your pen. – Parker Queen May 02 '17 at 13:35

How to center nav-items in Bootstrap?

3 Answers3

Linked

Related