Bootstrap nav-bar aligned center

Question

Here's my fiddle of my html/bootstrap code.

<body>
    <h1 style="text-align:center">AntwerPay</h1>
    <!--Navbar-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">AntwerPay</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class=""><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                           Gebieden
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Gebied 1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Alle Gebieden</a></li>
                </ul>
            </div>
        </div>
    </nav>


</body>

As you can see in my navbar everything is aligned real nicely to the left. This is a problem for me. I want the navbar-brand to be on the left, and i want the 3 other buttons to be centered. I have researched this a lot and found various .css codes but none worked for me.

This may help: https://stackoverflow.com/questions/34250001/how-do-i-center-the-navbar-elements/34255380#34255380 — vanburen, Jan 11 '16 at 17:37
Altijd leuk een Belg (denk ik) te zien hier! Als ik je met iets kan helpen, laat maar weten :) — Chris G, Jan 11 '16 at 17:39
@ChrisG correct;) belg inderdaad;) hartelijk dank, ik zal hier iets posten indien ik echt niets vind ;) — Tom Kustermans, Jan 11 '16 at 17:43
@TomKustermans: Anders kan je me altijd bereiken op chrisdd van telenet. Heb al vrij veel ervaring en kan op veel vlakken helpen (gratis natuurlijk :)). — Chris G, Jan 11 '16 at 17:48

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You can do this using CSS, I've included a suggestion for manually adjusting the position of the items:

.navbar .navbar-nav {
 display: inline-block;
 float: none;
 vertical-align: top;
 /* You'd have to adjust this whenever an item is added to the nav-bar */
 margin-right: 10%;
}

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

This has been answered already here

Along with your (Again) updated fiddle here

edited May 23 '17 at 12:04

Community

1
1

answered Jan 11 '16 at 17:39

Glen Despaux Jr

1,064
7
19

Well thank you very much, this code does in fact work as opposed to all others I tried, although being the OCD kid that I am, this isn't truely centered but just a tad off to the right. where would you say I should add code to slide it a little more to the left? in de `.navbar .navbar-collapse{}`? – Tom Kustermans Jan 11 '16 at 17:46
It's difficult to say, as this pertains the Bootstrap's own CSS. The direct issue with the slightly-off-centeredness (I guess that's a word?) is that your left-aligned logo changes the total width of the `nav-bar`. This tweak *actually does* center the content in the width provided, however the width is affected by the other element. – Glen Despaux Jr Jan 15 '16 at 17:34
I've added `margin-right: 10%;` to the CSS as that gives the effect you're looking for. You'll have to manually adjust to suit your needs, though. Hope that helps! – Glen Despaux Jr Jan 15 '16 at 17:43

score 0 · Answer 2 · answered Jan 11 '16 at 17:37

use this snippet

.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }

Updated fiddle

Remember

If you do NOT know how to make the navbar responsive, then implement the codes above in a @media (min-width: 768px) query in order not to fail the responsiveness of Bootstrap Navbar.

score 0 · Answer 3 · answered Jan 11 '16 at 17:39

0

Hope this works for you:

#myNavbar {
  text-align: center;
}
.navbar-nav {
  margin: 0 auto;
  display: inline-block;
  float: none;
}

Make shure to keep an eye on the mobile view.

answered Jan 11 '16 at 17:39

herrh

1,328
1
16
33

Bootstrap nav-bar aligned center

3 Answers3

use this snippet

Remember