TutorialMeta
Ad

How To Align Nav Item To The Right Side In A Navbar?

- 1 answer

How can I align my nav items in specific position? I want my brand name to be on left side and my log in button to the right end of the navbar, I am new to bootstrap, help me in solving this thing.

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" target="_blank" rel="nofollow noreferrer" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" target="_blank" rel="nofollow noreferrer" href="#">LogIn</a>
    </li>
  </ul>
</div>

Result pic

Ad

Answer

You can use Bootstrap classes d-flex and justify-content-between for the ul element. More details can be found here

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav d-flex justify-content-between">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" target="_blank" rel="nofollow noreferrer" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" target="_blank" rel="nofollow noreferrer" href="#">LogIn</a>
    </li>
  </ul>
</div>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad