Modifying Twitter Bootstrap Navbar to Center Links

When working with the Twitter Bootstrap navbar, users may encounter the need to align navigation links centrally, rather than the default left alignment. To achieve this, make the following customizations using the CSS stylesheet.

Solution

To center the navigation links in the navbar, implement the following CSS code:

.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

Alternative Approach

To preserve the Bootstrap defaults and target a specific navbar menu, create a custom class and apply it to the navbar container:

    

        ....
    

Then, target the .center class in the CSS stylesheet:

.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

Additional Considerations

To align submenu items to the left, add the following CSS rule:

.center .dropdown-menu {
    text-align: left;
}