Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

Question

When there is no room at the bottom of the viewport to fit dropdown menu, it is displayed at the top of its dropdown button. Is it possible alter this behavior and make dropdown

Answer 1

Bootstrap 4 uses Popper.js for positioning the dropdowns. Additionally, Bootstrap 4 allows you to pass some data-* attributes to control the behaviour of Popper.js on that dropdown.

The option that needs to be tweaked is the flip option of Popper.js. By default Bootstrap 4 sets this to true, causing dropdowns to appear above the dropdown-toggle element when there is not enough room at the bottom of the viewport.

To force the dropdown to always appear at the bottom, add data-flip="false" as an attribute of your dropdown-toggle element. For example:

  
    Dropdown button
  
  

    Action
    Another action
    Something else here