CODEWITHSUNDEEP
angularbootstrap-4
Avdhut
Avdhut

Reputation: 160

Bootstrap 4 angular 5 navbar links not getting aligned to right

enter image description hereI am trying to create an application with bootstrap 4 and angular 5 first time, but the navbar links that are aligned to right are getting aligned to left.

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <a class="navbar-brand abs" href="#">Navbar 1</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    <span class="navbar-toggler-icon"></span>
 </button>
 <div class="navbar-collapse collapse" id="collapsingNavbar">
    <ul class="navbar-nav">
      <li class="nav-item active">
          <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="//codeply.com">Codeply</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#myAlert" data-toggle="collapse">Link</a>
      </li>
  </ul>
  <ul class="navbar-nav ml-auto">
      <li class="nav-item">
          <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
        </li>
      </ul>
   </div>
</nav>

I have tried multiple options but output is not getting corrected.Hence request help to get link: About right aligned.

Upvotes: 1

Views: 748

Answers (1)

anees
anees

Reputation: 344

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <a class="navbar-brand abs" href="#">Navbar 1</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="collapsingNavbar" style="justify-content:flex-end">
      <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="//codeply.com">Codeply</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#myAlert" data-toggle="collapse">Link</a>
         </li>
     </ul>
     <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
       </li>
    </ul>

Upvotes: 1

Related Questions