Align Dropdown to right in bootstrap navbar

Question

I Need to Align just the Drop Down menu to the right end of the screen. I have tried adding dropdown-menu-right mr-auto.

The drop down goes till the right of class="nav navbar-nav"> not till the end of the screen

<div class="container">

  <!-- Static navbar -->
  <div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#navbar-offcanvas" data-canvas="body">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-offcanvas offcanvas" id ="navbar-offcanvas">

      <ul class="nav navbar-nav">
        <li><a href="../navmenu/">Slide in</a></li>
        <li><a href="../navmenu-push/">Push</a></li>
        <li><a href="../navmenu-reveal">Reveal</a></li>
        <li class="active"><a href="./">Off canvas navbar</a></li>

        <li class="dropdown ml-auto">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu  dropdown-menu-right mr-auto">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

It doesn't work because you're using Bootstrap 3 markup for Bootstrap 4. **[Read the docs](https://getbootstrap.com/docs/4.1/components/navbar/)** — Carol Skelly, May 16 '18 at 22:10

score 0 · Answer 1 · answered May 16 '18 at 21:28

0

Is this what you want? It isn't clear if you want to solve this only with bootstrap, but i manage to make the dropdown go to the right using a css stylesheet: a position=absolute and right=0 in the li.dropdown .

answered May 16 '18 at 21:28

davimdantas

123
1
8

I have add li.dropdown { position: absolute; right: 0; } Still it does't work – Naishu Babu May 16 '18 at 21:35
You would have to creat a css file, link to it on the html with `` The css would have: `li.dropdown { position:absolute; right:0; }` – davimdantas May 16 '18 at 21:40

Align Dropdown to right in bootstrap navbar

1 Answers1