title: Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
body: <p>I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items.
  Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this?
  I always want the dropdown to appear right below the button that toggles it.
  Thanks</p>
  
  <p>Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)</p>
  
  <pre><code>             &lt;div class="dropdown"&gt;
                  &lt;span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                      @topMenu.Name
                  &lt;/span&gt;
                  &lt;div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton"&gt;
                      @foreach (var subMenu in topMenu.SubMenu)
                      {
                          &lt;a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)"&gt;@subMenu.Name&lt;/a&gt;
  
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>