Bootstrap 4 Button to the right issue

Question

I'm new to Bootstrap 4 and I'm designing a very simple page using Bootstrap 4. I created a NAV where I need a logo and company name to the left (this is working) and I need two button to the right of the NAV. I've found many suggestion in forums, but none seem to work for me. I'm stuck.

This is my HTML code:

<nav class="navbar bg-avesta-blue">
<div class="row">
    <div class="col-sm-12">
        <a class="navbar-brand text-light" href="#">
          <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
          <h3 class="pt-1">
          AVESTA
          </h3>
        </a>
        <div class="float-right text-right">
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        </div>
    </div>
</div>

Here is what it looks like right now: As you can see, both buttons are aligned to the left. I need them to the right.

Answer 1

The Navbar has supported content, and the grid row>col aren't designed to be used inside the Navbar. Read and follow the documentation.

When you use .row inside the flexbox Navbar it will not be full-width as usual and will "shrink" to the left side. You can set w-100 to make the row full-width, but the better approach is to use the supported Navbar content as intended.

"Use our spacing and flex utility classes for controlling spacing and alignment within navbars"

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

<nav class="navbar bg-avesta-blue">
    <a class="navbar-brand text-light" href="#">
        <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
        <h3 class="pt-1">
          AVESTA
        </h3>
    </a>
    <div class="ml-auto">
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
    </div>
</nav>

Once you have the correct Navbar structure, alignment can be done using auto-margins or flexbox utilities as explained in the other related questions