center unordered list navbar - bootstrap 3

Question

So, Im trying to center my nav-bar list items. Since there isn\'t a utility function for this task, I devised the following code that places the unordered list in a column

Answer 1

Steps I took:

• Remove float: left from list and list elements
• Use display: inline instead for list elements
• Set links to display: inline-block so they keep their block dimensions
• Simply add text-align: center to the navbar to center everything
• Wrap in media query so vertical list on mobile is unaffected

Resulting CSS adding a .navbar-centered style:

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

Use by applying .navbar-centered style to navbar:

    ...