Bootstrap 5 flex-grow-0 doesn't work like it is supposed to

Question

Here is my code snippet for my navbar.

<nav class="navbar navbar-expand-md fixed-top bg-white">
  <div class="container my-2">
    <a href="/" class="navbar-brand text-dark fw-bold">
      Rakshit Deshmukh
    </a>
    <button class="btn btn-outline-info ml-auto">Contact me</button>
    <button
      class="navbar-toggler"
      data-toggle="collapse"
      data-target="#collapseNav"
    >
      <span class="fas fa-bars text-dark"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link text-dark h6 mx-3 my-auto">
          Blogs
        </a>
      </div>
    </div>
  </div>
</nav>
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
  integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
  integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
  crossorigin="anonymous"
></script>

Here is the output navbar which the current code produces:

Here's what I want to produce as the navbar:

Is it the CDN's issue?

As it so happens, for this project, I migrated from the previous Bootstrap 4 to Bootstrap 5 and hence these issues are rising.

score 1 · Accepted Answer · answered Sep 09 '21 at 11:28

This isn't because flex-grow-0 has changed. It's because ml-auto is now ms-auto...

<nav class="navbar navbar-expand-md fixed-top bg-white">
    <div class="container my-2">
        <a href="/" class="navbar-brand text-dark fw-bold"> Rakshit Deshmukh </a>
        <button class="btn btn-outline-info ms-auto">Contact me</button>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
            <span class="fas fa-bars text-dark"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link text-dark h6 mx-3 my-auto"> Blogs </a>
            </div>
        </div>
    </div>
</nav>

https://codeply.com/p/i9uVTwK3tf

Bootstrap 5 now has RTL support so right concepts of "left" and "right" have changed to "start" and "end". Therefore, ml-auto is now ms-auto.

Also see: Bootstrap align navbar items to the right

Bootstrap 5 flex-grow-0 doesn't work like it is supposed to

1 Answers1