Align Bootstrap Navigation to Center

Question

I'm having a problem with bootstrap 3 navigation, i have some content on the left, center and right. it seems there is no option for centering the navigation.

http://jsfiddle.net/29tQt/embedded/result/

I'm trying to get the links titled "center" to be in the center of the page, how can i achieve that ?

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Center</a>
                </li>
                <li><a href="#">Center</a>
                </li>
                <li><a href="#">Center</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right</a>
                </li>
                <li><a href="#">Right</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

No it's not, that question doesn't have any `navbar-right` content and the answer fails if we have `float:right` content @kba — trrrrrrm, Feb 24 '14 at 06:50
@sberry no i'm trying to do it with a valid css way, i know that i can do many hacks to make this work but i'm trying to do it with a valid practice. — trrrrrrm, Feb 24 '14 at 07:05
@ra_htial: Well, isn't http://jsfiddle.net/29tQt/5/ pretty much what you want? Because that's the top answer from the other question. — kba, Feb 24 '14 at 07:18

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

57

Thank you all for your help, I added this code and it seems it fixed the issue:

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

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

Source

Center content in responsive bootstrap navbar

edited May 23 '17 at 11:46

Community

1
1

answered Feb 24 '14 at 07:18

trrrrrrm

11,362
25
85
130

helps me easy way. – Abdulla Nilam Dec 06 '16 at 15:30
Works great! Only thing is taht for some reason `display: inline-block` mess up the height of the menu, making the
– Vinicius Garcia Sep 05 '17 at 20:45
1

@vinigarcia87 This may be a bit late but I found that on `.navbar-collapse` the height is set to `auto !important` if you change this to the height of the menu items nested in it it will remove the gap. This may require further work to get it to display correctly on mobile. – Ginger Squirrel Sep 29 '17 at 10:22

score 5 · Answer 2 · answered Feb 24 '14 at 07:19

5

Add 'justified' class to 'ul'.

<ul class="nav navbar-nav justified">

CSS:

.justified {
    position:absolute;
    left:50%;
}

Now, calculate its 'margin-left' in order to align it to center.

// calculating margin-left to align it to center;
var width = $('.justified').width();
$('.justified').css('margin-left', '-' + (width / 2)+'px');

JSFiddle Code

JSFiddle Embedded Link

answered Feb 24 '14 at 07:19

Mohit Pandey

3,679
7
26
38

3

This will cause disgusting behavior, the navigation will realign after document ready. Not recommended to style a website using javascript – zanderwar Feb 10 '16 at 05:02
It worked. thanks. :) – MD. Shafayatul Haque Nov 08 '17 at 05:14

score 1 · Answer 3 · answered Feb 24 '14 at 07:03

.navbar-nav {
   float: left;
   margin: 0;
   margin-left: 40%;
}

.navbar-nav.navbar-right:last-child {
   margin-right: -15px;
   margin-left: 0;
}

Updated Fiddle

Since You Have used the float property we don't have many options except to adjust it manually.

Piyush Marvaniya · Answer 4 · 2014-02-24T07:09:23.953

Try this css

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    content: " ";
    display: table-cell;
}

ul.nav {
    float: none;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 240px;
}

Align Bootstrap Navigation to Center

4 Answers4

Linked

Related