How to center nav-items in Bootstrap? [duplicate]

by

Use the flexbox and margin utils responsively…

Bootstrap 4 alpha 6
http://codeply.com/go/YvzHvQQRAs (center brand & links)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </div>
</nav>

Bootstrap 4.1
https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)

enter image description here

EDIT..

The answer is still basically the same. Use mx-auto to center.

http://codeply.com/go/mycC5z8lpJ (center links, brand left)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8

Other Bootstrap 4 Navbar alignment examples

Also see…

Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  5. Create a responsive navbar sidebar “drawer” in Bootstrap?
  6. Bootstrap 4 Cards of same height in columns
  7. How to make Bootstrap 4 cards the same height in card-columns?
  8. Bootstrap – align button to the bottom of card
  9. Bootstrap 4 – Sticky footer – Dynamic footer height
  10. Bootstrap 4 – Responsive cards in card-columns
  11. Align the form to the center in Bootstrap 4 [duplicate]
  12. Bootstrap navbar link color won’t change
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. My Website is Mirror-flipped on iPhone Devices
  19. How can I override Bootstrap CSS styles?
  20. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  21. IE8 issue with Twitter Bootstrap 3
  22. Change Bootstrap tooltip color
  23. Bootstrap 3 collapsed menu doesn’t close on click
  24. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  25. How to center buttons in Twitter Bootstrap 3?
  26. Twitter Bootstrap: Center Pills
  27. Bootstrap – Fill fluid container between header and footer
  28. Bootstrap row and col explanation
  29. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  30. How to work with ellipsis in bootstrap responsive table

Leave a Comment