Bootstrap Move elements inside navigation bar-CodePudding

I have created navigation bar as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
        <a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a href="/cars.html" class="nav-link text-light">Cars</a>
                <a href="/tools.html" class="nav-link text-light">Tools</a>
                <button type="submit" class="btn">Pay</button>
            </div>
        </div>
    </nav>

Right now, all the elements are visually sorted from the left side of the screen. That is fine, except for the Pay button, which I would like to have in the right corner of the navigation bar. I tried doing so by adding

style="margin-right: 0px;

to it, but this doesn't seem to be working (it remains at the same place). Can you see my problem?

CodePudding user response：

I used position: absolute; for your class called btn and made it 5px from the top and the right. You can adjust as you would like, but the top and right styling only works if you tell the html that the position is absolute.

 .btn {
  right: 5px;
  top: 5px;
  position: absolute;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
        <a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a href="/cars.html" class="nav-link text-light">Cars</a>
                <a href="/tools.html" class="nav-link text-light">Tools</a>
                <button type="submit" class="btn">Pay</button>
            </div>
        </div>
    </nav>