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.

Your question has already answer http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar — eylay, Dec 20 '15 at 01:04

score 3 · Accepted Answer · answered Dec 20 '15 at 01:24

3

that should help you margin:0 auto;

answered Dec 20 '15 at 01:24

yahoo5000

470
6
18

score 1 · Answer 2 · answered Dec 20 '15 at 01:45

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.

answered Dec 20 '15 at 01:45

Prahlad Yeri

3,567
4
25
55

How do I center the following navbar in Boostrap?

2 Answers2