Bootstrap wont change navbar to flex-end position when its on desktop resolution

Question

I have a navbar that is positioned center when the website is on desktop resolution and when it collapse its normally centered. I want it to be flex-end on desktop and center normally on mobile screen.

I cannot find the solution.

Code Snippet

<header>
  <div class="container-fluid container-nav">
    <div class="row align-items-center row-nav">
      <div class="col-lg-3">
        <img class="rounded mx-auto d-block" src="img/2.png" />
      </div>
      <div class="col-lg-4 col-nav">
        <nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark w-100" data-bs-theme="dark">
          <div class="container-fluid">
            <!-- Add a custom class "navbar-toggler-right" to the toggler button -->
            <button class="navbar-toggler justify-content-end" 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">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link">Disabled</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</header>

<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

You are using wrong code for navbar basically, never use navbar in row and columns structure. I have cleaned up you code and here is the updated one. On Desktop the navbar will be on the end because i have added ms-auto in ul. For mobile you want menu items to be center align so i added text-center. I have used text-lg-start class becuase you are expanding navbar with navbar-expand-lg this class. Feel free to play around.

<nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark w-100" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img class="rounded mx-auto d-block" src="img/2.png" /></a>
    <!-- Add a custom class "navbar-toggler-right" to the toggler button -->
    <button class="navbar-toggler justify-content-end" 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 ms-auto text-center text-lg-start">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>