Center Navbar links without brand pushing it to the right in Bootstrap 4?

by

This happens because of the way adjacent flexbox items position relative to each other.

One option is to use the flexbox utils, and a full width placeholder element on right. The navbar-brand is also set to full-width using w-100 util class.

<nav class="navbar navbar-toggleable navbar-inverse bg-primary justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCenter">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href class="navbar-brand d-flex w-100 mr-0">Brand is Wider Name</a>
    <div class="navbar-collapse collapse" id="navbarCenter">
        <ul class="navbar-nav mx-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Center</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100"> </div>
</nav>

http://www.codeply.com/go/N7veP8FMqg

Another option is to absolute position the .navbar-nav..

@media (min-width: 567px) {
    .abs-center-x {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
}

https://www.codeply.com/go/RCBftzZCD8

Related:
Bootstrap 4 menu toggle button to left and right, with brand in center
How the LOGO could be CENTERED and Not collapsing and toggle icon should appear on left in the Navbar?

More Related Contents:

  1. Align the form to the center in Bootstrap 4 [duplicate]
  2. Add spacing between vertically stacked columns in Bootstrap 4
  3. My Website is Mirror-flipped on iPhone Devices
  4. Which way to implement this picture in HTML CSS code and bootstrap
  5. Trying to work on responsiveness of login form
  6. Bootstrap row with columns of different height
  7. `col-xs-*` not working in Bootstrap 4
  8. Bootstrap 4: Multilevel Dropdown Inside Navigation
  9. how to make a whole row in a table clickable as a link?
  10. Animate/Shrink NavBar on scroll using Bootstrap
  11. Bootstrap columns stacking vertically on mobile device
  12. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  13. How to center nav-items in Bootstrap? [duplicate]
  14. Create a responsive navbar sidebar “drawer” in Bootstrap?
  15. Bootstrap 4 row fill remaining height
  16. Bootstrap 4 Cards of same height in columns
  17. How to make Bootstrap 4 cards the same height in card-columns?
  18. Bootstrap – align button to the bottom of card
  19. Bootstrap 4 – Sticky footer – Dynamic footer height
  20. Bootstrap 4 – Responsive cards in card-columns
  21. How to center cards in bootstrap 4?
  22. Bootstrap navbar link color won’t change
  23. Empty vertical space between columns in Bootstrap 4
  24. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  25. Bootstrap navbar: nothing is displayed on smaller devices
  26. Why are some of my CSS rules not working?
  27. Why aren’t my bootstrap 4 columns the same height?
  28. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  29. How to make Bootstrap cards the same height in card-columns?
  30. How can I reuse HTML code across several HTML files

Leave a Comment