Centering the navbar content in Bootstrap 4 (alpha 5)

by

Centering Navbar items is simpler in Bootstrap 4, and doesn’t require additional markup.

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item active text-center">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown text-center">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

Bootstrap 4 Center Navbar Demo (updated for v4.0.0)

If you need to center only specific elements, such as the Brand or Links, see this answer

More Related Contents:

  1. Bootstrap 4 navbar with 2 rows
  2. Bootstrap 4 card-deck with number of columns based on viewport
  3. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  4. Vertical Align Center in Bootstrap 4 [duplicate]
  5. Bootstrap align navbar items to the right
  6. Change navbar color in Twitter Bootstrap
  7. Order columns through Bootstrap4
  8. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  9. Center an element in Bootstrap Navbar
  10. Bootstrap Center Vertical and Horizontal Alignment
  11. How to change the bootstrap primary color?
  12. How can I change the Bootstrap 4 navbar button icon color?
  13. Bootstrap with different order on mobile version
  14. Search input with an icon Bootstrap
  15. What is class=”mb-0″ in Bootstrap 4?
  16. Customize Bootstrap 4’s grid-system Breakpoints
  17. Bootstrap 4 – Navbar items outside the collapse
  18. Align the form to the center in Bootstrap 4 [duplicate]
  19. Bootstrap change order of columns
  20. Bootstrap 3: pull-right for col-lg only
  21. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  22. Table column sizing
  23. How can I change the order of Bootstrap columns?
  24. Centering the image in Bootstrap
  25. Bootstrap 4 custom build generator / download [duplicate]
  26. how to change bootstrap version 4 button color
  27. Vertically align Bootstrap badge inside heading
  28. How do I make card-columns order horizontally?
  29. How to make a Bootstrap 4 full width dropdown in Navbar?
  30. Bootstrap Navbar list items/links not showing

Leave a Comment