Bootstrap 4 Navbar align logo center and toggle icon on the left

by

The Bootstrap 4 Navbar uses flexbox, so it’s possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100 order-0">
        <div class="w-100">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <a class="navbar-brand text-center w-100" href="#">Navbar</a>
        <span class="w-100"></span>
    </div>
    <span class="w-100"></span>
</nav>

Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi

Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items

More Related Contents:

  1. Disable responsive (mobile) navbar in Bootstrap
  2. Bootstrap 3 Navbar Collapse
  3. Center an element in Bootstrap Navbar
  4. Five equal columns in twitter bootstrap
  5. How to extend/modify (customize) Bootstrap with SASS
  6. Center the content inside a column in Bootstrap
  7. How to make the row stretch remaining height
  8. Bootstrap Rows and Columns – Do I need to use row?
  9. Responsive website zoomed out to full width on mobile
  10. Left align and right align within div in Bootstrap
  11. Animate/Shrink NavBar on scroll using Bootstrap
  12. Bootstrap – row can I have columns add up to more then 12?
  13. Bootstrap 4 – Navbar items outside the collapse
  14. Wrapping bootstrap columns in extra div
  15. How to create new breakpoints in bootstrap 4 using CDN?
  16. Bootstrap 4 Multiple fixed-top navbars
  17. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  18. Bootstrap navbar: nothing is displayed on smaller devices
  19. Missing visible-** and hidden-** in Bootstrap
  20. bootstrap 4 nav doesn’t display hamburger on resize
  21. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  22. Bootstrap – I don’t want columns to have the same height
  23. How can I get my Twitter Bootstrap buttons to right align?
  24. Decreasing height of bootstrap 3.0 navbar
  25. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  26. How to make a Bootstrap 4 full width dropdown in Navbar?
  27. Bootstrap Navbar list items/links not showing
  28. Bootstrap 4 responsive navbar vertical
  29. Unable to override $theme-color in bootstrap
  30. How to justify navbar-nav in Bootstrap 3

Leave a Comment