Bootstrap navbar, aligning right instead of left

Question

i hope someone can help me with the following: Why does this piece of HTML code for bootstrap navbar gives my Home to the right instead of left?

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-nav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

It works if i change <div class="navbar-nav"> to <div class="collapse navbar-collapse" id="navbarNav"> , but then the Home dissapears when scaling the browser window down, i dont want it collapsing. So how can i have it on the left, as simple as possible without collapsing or any other special effects? Here is an image of the left alignment: Scenario

Answer 1

add class navbar-nav mr-auto in ul

Answer 2

Add the class mr-auto to <div class="navbar-nav"> to make sure it is pushed to the left:

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.2-beta.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <div class="navbar-nav mr-auto"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> </div> </div> </nav>

Or just replace <div class="navbar-nav mr-auto"> with, see which suits you best:

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.2-beta.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <div class="mr-auto"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> </div> </div> </nav>