How to align nav items to the right in Bootstrap 5?

by

The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you’ll see that…

  • l (left) has been replaced with s (start)
  • r (right) has been replaced with e (end)

Why margin left (ml-*) is not working in Bootstrap 5?

ml-auto no longer exists, and the Bootstrap 5 equivalent would be ms-auto:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block">
            <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
            <img src="//placehold.it/40?text=LOGO" alt="logo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ms-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Demo: https://codeply.com/p/zzFC5XoyUm

Why margin right (mr-*) is not working in Bootstrap 5?

Additionally, mr-auto has been replaced with me-auto.

Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.

The flexbox utils such as justify-content-end can also be used as explained here

More Related Contents:

  1. Change navbar color in Twitter Bootstrap
  2. How to change Bootstrap navbar collapse breakpoint
  3. Bootstrap align navbar items to the right
  4. Bootstrap NavBar with left, center or right aligned items
  5. How to align a to the middle (horizontally/width) of the page [duplicate]
  6. Bootstrap dropdown sub menu missing
  7. Change bootstrap navbar collapse breakpoint without using LESS
  8. Center content in responsive bootstrap navbar
  9. What’s the difference between align-content and align-items?
  10. Center an element in Bootstrap Navbar
  11. Align elements side by side
  12. How to vertically center inside the parent element with CSS? [duplicate]
  13. Bootstrap Center Vertical and Horizontal Alignment
  14. How to hide collapsible Bootstrap navbar on click
  15. Bootstrap 3 Navbar with Logo
  16. How can I align one item right with flexbox?
  17. Bootstrap 3 – disable navbar collapse
  18. Bootstrap 4 – Navbar items outside the collapse
  19. Vertical and horizontal align (middle and center) with CSS [duplicate]
  20. How to use the new affix plugin in twitter’s bootstrap 2.1.0?
  21. Difference between flex-end and end? [duplicate]
  22. Align vertically using CSS 3
  23. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  24. Align button at the bottom of div using CSS
  25. How to make a Bootstrap 4 full width dropdown in Navbar?
  26. Bootstrap Navbar list items/links not showing
  27. Center a column using Twitter Bootstrap
  28. CSS: Center block, but align contents to the left
  29. What does font-size really correspond to?
  30. How to control number of items per row using media queries in Flexbox?

Leave a Comment