How can I make my navigation bar logo, search-bar and links have space between in Bootstrap5 with flex?

Question

I would like the logo text to be on the left, the search bar in the middle and the user links on the right of the navigation bar.

How can I do that using bootstrap5?

<!-- NAVIGATION BAR - FIXED -->
  
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">

    <div class="container-fluid">

<!-- Logo text. -->
            <a class="navbar-brand" href="javascript:void(0)"><h1>Logo text.</h1></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
              <span class="navbar-toggler-icon"></span>
            </button>
          
<!-- Search form -->
        <div class="collapse navbar-collapse" id="mynavbar">
            <form class="d-flex">
              <input class="form-control me-2" type="text" placeholder="Search">
              <button class="btn btn-primary" type="button">Search</button>
            </form>

<!-- User links -->
            <ul class="navbar-nav me-auto">
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)">Link 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)">Link 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)">Link 3</a>
              </li>
            </ul>
        </div>
    </div>
  </nav>

Answer 1

Just add:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
  <div class="container-fluid">    
    <div class="d-flex justify-content-between">
      <!-- Your elements -->
    </div>
  </div>
</nav>

It must work. But if its not, here the full documentation about it: https://getbootstrap.com/docs/5.0/utilities/flex/

Edit:

Here I paste an example. It works for me. What I've done is add some css in order to overwrite some bootstrap default attributes. Indeed, navbar-collapse was doing something, but mainly is DOM structure and boostrap classes.

.navbar-collapse {
  flex: 0 0 auto;
  flex-grow: 0 !important;
}

@media only screen and (max-width: 768px) {
    .navbar-collapse {
      position: absolute;
      width: 100%;
      top: 66px;
      left: 0;
      background: black;
      padding: 15px;
    }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- NAVIGATION BAR - FIXED -->
  
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
      <div class="w-100 d-flex justify-content-between">
        <!-- Logo text. -->
        <a class="navbar-brand" href="javascript:void(0)">
          <h1 class="d-inline-block">Logo text.</h1>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Search form -->
        <div class="collapse navbar-collapse" id="mynavbar">
          <form class="d-flex">
            <input class="form-control me-2" type="text" placeholder="Search">
            <button class="btn btn-primary" type="button">Search</button>
          </form>
          <!-- User links -->
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Link 3</a>
            </li>
        </ul>
      </div>
    </div>
  </div>

Note that I've added a @mediaquery to adjust the behaviour of the menu and it works on mobile and on tablet/desktop.