Move navbar-brand to center when navbar collapsed in bootstrap 5

Question

How can I move navbar Brand to the center when navbar collapsed (stay on left/right side when navbar expands)in bootstrap 5

Answer 1

Easy Solution

You can solve this problem very easily by adding an empty DIV after the brand element:

    <a class="navbar-brand" href="#">Brand Name</a>
    <div></div>

Why does this work?

The navbar uses display flex with justify-content: space-between. The extra DIV creates 3 columns rather than 2 and with the brand in the center.

Snippet

Run the snippet and resize to trigger the breakpoint. The brand is in the center when collapsed but otherwise appears on the left.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand Name</a>
    
    <div></div>
    
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>