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

alignment, bootstrap-5, css, navbar

Solution

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

Problem

I have copied a navbar HTML code from https://www.codeply.com/go/qhaBrcWp3v Example 6: ``` <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 ml-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">Bdfdsfslog</a> </li> <li class="nav-item"> <a href="#" class="nav-link m-2 menu-item">Contact</a> </li> </ul> </div> ``` The code keeps the nav items to right but when I paste it and run my HTML code it doesn't work and all items are in the left place here is my index.html ``` <html> <head> <title>Website Template</title> <link rel="stylesheet" href="style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </head> <body data-spy="scroll" data-target="#navbarResponsive"> <div id="home"></div> <!-- NAVIGATION --> <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 ml-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> <!-- END OF NAVIGATION --> </body> ``` I have tried `Navbar` code from https://getbootstrap.com/docs/5.0/components/navbar/ but I don't know how can I move nav items (`ml-auto` didn't work)

Original source

Related problems