Bootstrap Dropdowns are useful for displaying lists dynamically. They are frequently used within navbars for presenting the user with links.
The Bootstrap Dropdown can be made to have responsive alignment at any breakpoint by giving the dropdown toggle element the custom attribute data-display="static" and one of the following classes:
data-display="static"
dropdown-menu-{bp}-left
dropdown-menu-{bp}-right
dropdown-menu-{bp}-automatic
You can find how to build a Bootstrap Dropdown here.
Create a form with a Bootstrap4 Presentation Template. Ensure that the Presentation Template includes the Popper.js library. Otherwise, you can use the following CDN.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Create a Panel Control with the class dropdown.
dropdown
Add a Button Control to the Panel Control with the id myButton, class dropdown-toggle and custom attributes:
myButton
dropdown-toggle
data-toggle="dropdown", data-display="static", type="button"
Beneath the Button Control, create a Panel Control with id myDropdown and classes dropdown-menu and dropdown-menu-md-right
myDropdown
dropdown-menu
dropdown-menu-md-right
Add two Hyperlink Controls to the myDropdown Panel Control with content: Item A and Item B. Give each Hyperlink Control the class dropdown-item.
dropdown-item
Run the form and observe the behaviour of the dropdown at different screen sizes.