How do I center the following navbar in Boostrap?

Question

I have a navigation bar that looks like this:

<nav class="navbar navbar-default">
<div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Hello</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

I just wanted to center the items in the list. I tried:

.navbar-default {
  width: 100%;
  text-align: center;
}

But no luck.

Answer 1

You can set margin:0 auto; to the navbar style as the other answer suggests, or you can also add the bootstrap container class to it which basically does the same thing for you.

Answer 2

that should help you margin:0 auto;