0

I tried using the .ml-auto class for the element, but my navbar still doesn't seem to be moving to the right. Can someone help me with this? Thank you and much apreciated.

    <div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav ml-auto flex-nowrap">
    <li class="nav-item">
      <a class="nav-link" href="">Product</a> 
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Download</a> 
          </li>
    </ul>
</div>
</nav>

Notes: The reason I put the container-fluid div outside the nav element is that I have a title and a hero picture after this nav, and I also want to put them in the div.

Hà Huy
  • 1
  • Does this answer your question? [Bootstrap 5 navbar align items right](https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right) – Arleigh Hix Sep 11 '21 at 07:06

1 Answers1

1

Looking at your attributes, you are probably using Bootstrap 5. In BS5, left is renamed to start. So you need to use ms-auto, instead of ml-auto. Your issue will be solved.

Siddharth Bhansali
  • 2,017
  • 2
  • 10
  • 19