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 >
  <div >
    <a  href="#">Navbar</a>
    <div >
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

It works if i change <div > to <div 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

CodePudding user response：

Add the class mr-auto to <div > 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 >
  <div >
    <a  href="#">Navbar</a>
    <div >
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Or just replace <div > 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 >
  <div >
    <a  href="#">Navbar</a>
    <div >
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

add class navbar-nav mr-auto in ul