Here is my code derived from this topic: https://getbootstrap.com/docs/4.0/components/navs/#base-nav (Boostrap v4.0). How do I place the "TRY NOW" button on the right side of this bootstrap base navigation?

        <div class="nav">
            <a class="nav-link active" href="#">Overview</a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Gallery</a>
            <a class="nav-link" href="#">Resources</a>
            <a class="btn btn-primary btn-sm" href="#" role="button">TRY NOW</a>
        </div>

CodePudding user response：

Try adding ml-auto to "TRY NOW" button

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav">
 
<a class="nav-link active" href="#">Overview</a>
     <a class="nav-link" href="#">Features</a>
     <a class="nav-link" href="#">Gallery</a>
     <a class="nav-link" href="#">Resources</a>
     <a class="btn btn-primary btn-sm ml-auto" href="#" role="button">TRY NOW</a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav">
 
<a class="nav-link active" href="#">Overview</a>
     <a class="nav-link" href="#">Features</a>
     <a class="nav-link" href="#">Gallery</a>
     <a class="nav-link" href="#">Resources</a>
      <div class="ml-auto">
     <a class="btn btn-primary btn-sm " href="#" role="button">TRY NOW</a>
</div> </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>