-2

How do you align Bootstrap 5 navbar items to the right? In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="col-md-6">
  <nav class="navbar navbar-expand-lg navbar-light bg-info ">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item active">
          <a class="nav-link text-white" href="#">
            <h5>Home</h5><span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">
            <h5> About</h5>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">
            <h5>Contact me</h5>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
shameema cp
  • 1
  • 2
  • https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right – Z0OM Jul 06 '22 at 14:54
  • Here you can find more details. [https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right](https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right) – Tec J Jul 06 '22 at 14:55
  • Going forward, please use the editor tools available to you to format your code. It wasn't appearing in your question. – isherwood Jul 06 '22 at 15:41

1 Answers1

0

Bootstrap 5 no longer use ml and mr -- instead they swapped it out for ms (margin start) and me (margin end) to account for RTL support. Obviously in RTL right and left are swapped but start and end still makes sense in this context

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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 ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" 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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Simp4Code
  • 1,394
  • 1
  • 2
  • 11