Using Bootstrap 4, how to align navbar-brand on the right?

Question

I'm using Bootstrap 4. I'd like the navbar-brand item (which is just a text element) to be on the far right. The menu (as normal) defaults to the left.

I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.

mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.

Here is my code:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand navbar-right">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

You can use the order-last class. However, you'll probably want the brand to be still first/top on mobile screens, so you can use order responsively like this...

navbar-brand order-md-last

https://www.codeply.com/go/Vq7ajCEfsg

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand order-md-last">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>

More on Bootstrap ordering

An alternate option is to use flex-row-reverse responsively on the parent navbar. This will switch the order of the brand and nav links, but only on the non-mobile menu.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
 ...
</nav>

And, if you want to keep the brand and toggler centered on mobile, you can wrap them in another div and still center with mx-auto: https://www.codeply.com/go/xXBdCHGAAN

---

Related:
Bootstrap 4 align navbar items to the right