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>

Carol Skelly · Accepted Answer · 2018-04-23T11:28:05.527

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

Did you test this when you use the collapse at lower resolutions because it forces the brand to the bottom of the menu when you click on the menu toggle button. — Steve K, Mar 22 '18 at 17:27
Thank you... I'm new to Bootstrap, and still figuring out many things. This works exactly the way I wanted. — Eric Burdo, Mar 22 '18 at 17:46

score 1 · Answer 2 · answered Jul 23 '18 at 10:40

1

Use .justify-content-md-end

<nav class="navbar navbar-expand navbar-dark bg-info">
 <div class="container justify-content-md-end">
  <a class="navbar-brand" href="#">Brand</a>
 </div>
</nav>

answered Jul 23 '18 at 10:40

lijoagain

11
2

WebDevBooster · Answer 3 · 2018-03-22T17:33:38.837

how to put the navbar-brand on the right?

Add the order-md-last class to it (additionally to mx-auto that you experimented with).

That ordering class re-orders the element on screens that are medium (md) or larger. On smaller screens, no re-ordering happens and your mx-auto class gets applied.

Here's the code snippet with that order class applied:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
    <a href="#" class="navbar-brand mx-auto 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>

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

3 Answers3