I've been trying to move a single nav-item to the right side of the navbar but it doesn't work. I'm using a simple navbar, with no search tool or dropdown menu, as the below:

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <!-- This is the item I want to move to the left -->
        <li >
          <a  href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

• I've tried using justify-content-end only on the nav-item but got no result
• I've tried using ms-auto on the ul but it moved the whole thing

CodePudding user response：

Link to Fix You are missing the closing ul tag. Also make another ul with that link li and li item and apply the ms-auto on that ul tag

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <!-- This is the item I want to move to the left -->

        </ul>
      <ul >
        <li >
          <a  href="#">Link</a>
        </li>
        </ul>
    </div>
  </div>
</nav>