how to align dropdown right in bootstrap + angular?

Question

can you please tell me how to align dropdown right in bootstrap + angular ?

here is my code https://stackblitz.com/edit/angular-4risp3?file=src%2Fapp%2Fapp.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Recipe Book</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto header_nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Recipes </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shopping List</a>
      </li>
      <li class="nav-item dropdown float-right">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a href="#">Save Data</a>
          <a href="#">Fetch Data</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

As in you want it at the right hand side of the page? – Mitch Wilkins Jun 22 '18 at 03:36 — Mitch Wilkins, Jun 22 '18 at 03:36

Mohsin · Answer 1 · 2018-06-22T03:45:57.510

1

Try this

.float-right {
padding: 0;
float: right;
position: relative;
    }

edited Jun 22 '18 at 03:45

answered Jun 22 '18 at 03:37

Mohsin

199
5
19

Immad Hamid · Answer 2 · 2018-06-22T03:45:44.817

Remove the dropdown li from this current ul and after the ul add another ul as follow:

<ul class="navbar-nav mr-right header_nav">
   <li class="nav-item dropdown my-2 my-lg-0">
      <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button"> Dropdown </a>
      <div aria-labelledby="navbarDropdown" class="dropdown-menu"><a href="#">Save Data</a><a href="#">Fetch Data</a></div>
   </li>
</ul>

I made the changes in chrome developers tools, so please remove the extra items that came while copying... Or you can just take the dropdown li and after the ul wrap the dropdown li with another ul like this:

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

Does the answer above helped? – Immad Hamid Jun 22 '18 at 04:29 — Immad Hamid, Jun 22 '18 at 04:29

how to align dropdown right in bootstrap + angular?

2 Answers2