1

So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-

 "styles": [
        "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"

        ],

whereas my code looks like this:-

<ul class=" nav navbar-nav navbar-right">

      <ul class="dropdown-menu">
        <li >
          <a class="nav-link" href="#">Save Data</a>
        </li>
        <li >
          <a class="nav-link" href="#">Fetch Data</a>
  </li>
  </ul>
  </ul>
  </div>
  </div>
  </nav>

`

Output is :- output

my save data and fetch data are not appearing on right.what is the reason?

Aditi
  • 53
  • 8

1 Answers1

1

Just replace "navbar-right" with "ml-auto". But still things are wrong with your code apart from "navbar-right". It should be -

<ul class="navbar-nav ml-auto">
    <li >
        <a class="nav-link" href="#">Save Data</a>
    </li>
    <li >
        <a class="nav-link" href="#">Fetch Data</a>
    </li>
</ul>

I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-

 <ul class = "navbar-nav ml-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#"  role="button" data-toggle="dropdown">
      Manage
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Save Data</a>
      <a class="dropdown-item" href="#">Fetch Data</a>
    </div>
  </li>
</ul>

These existing questions might help -

Dexter Mandark
  • 131
  • 2
  • 7
  • Welcome to StackOverflow! It would be also nice to explain to OP why his original code doesn't work (`ul` in `ul` nesting, etc.) – Vepth Jun 28 '20 at 23:29
  • Thankyou! Can you explain why ml auto specifically is used? :') – Aditi Jun 29 '20 at 06:51
  • ml-auto is "margin left : auto" ; I guess it has to do with the fact that bootstrap 4 uses flexbox to handle layouts instead of floats. – Dexter Mandark Jun 30 '20 at 19:00