-1

I have tried this code but still haven't got signup and login links at right side of page

I have used mr-auto,ml-auto and even justify-content-end, none of them work

<nav class="navbar navbar-expand-lg navbar-light">

   <div class="container-fluid">
     <a href="#" class="navbar-brand">pUpe</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navNav1" aria-controls="navNav1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
   <div class="collapse navbar-collapse" id="navNav1">
     <ul class="navbar-nav">
       <li class="nav-item"><a class="nav-link" href="#">About</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
     </ul>
     <ul class="navbar-nav justify-content-end">
       <li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
       <li class="nav-item"><a class="nav-link" href="#">log In</a></li>
     </ul>

   </div>
     
</div>


</nav>
xyz
  • 1

1 Answers1

-1

Try putting ms-auto class on the <ul> holding "Sign Up" and "Log In".

So change: <ul class="navbar-nav justify-content-end">

to <ul class="navbar-nav ms-auto">

Apparently in Bootstrap 5 some of the spacing utility names were changed. ms-auto stands for "margin-start: auto". This answer has a great cheat sheet.

Just a note for the future: to use flex classes like justify-content-end, you'll need to use d-flex class to make the element a flex item. But you want the flex element to be the parent of the item you want to align: so above you'd probably want your flex element to be the <div> that contains the two navbar elements.

JWern
  • 51
  • 1