Bootstrap 4 Dropdown - Disable auto placement caused by popper.js

I achieved this in Bootstrap 4.3.1 by adding data-flip="false" to the dropdown element.

ex: <a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>

Bootstrap 4.1

There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static" to prevent popper.js from dynamically changing the dropdown position...

Bootstrap 4.0

There are some issues with popper.js and positioning.

I've found the solution is to position-relative the .dropdown, and set it as the data-boundary="" option in the dropdown toggle: https://www.codeply.com/go/zZJwAuwC5s

  <div class="dropdown position-relative" id="dd">
        <button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            ...
        </div>
   </div>

The boundary is set to the id of the dropdown. Read more about data-boundary.

---

Related questions:
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4