How To Allow Bootstrap Dropdown Item List To Display Outside Of The Class="well"

This issue stems from this issue. Dynamic width of a bootstrap 3 button to stay in col-md-* with long label on button Here is the example of the issue. http://codepen.io/anon/pen/O

Solution 1:

(Adding comment as answer in case it may help someone out in the future)

You can adjust the min-height on .well and remove the overflow on .well-lg.

.well {
  min-height: 85px;
}

Here's the pen: codepen.io/anon/pen/BLaGVB

Solution 2:

In order to solve this, it will be required to move your content out side of that main div element.

Keep in mind that children element will receive explicit CSS properties by inheritance.

Check in this Sample code, the expanded divs are sibling related to the button instead of children elements.

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><!-- Optional theme --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"><!-- Latest compiled and minified JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><br><br><br><br><br><br><br><br><divclass="dropup"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu2"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
    Dropup
    <spanclass="caret"></span></button><ulclass="dropdown-menu"aria-labelledby="dropdownMenu2"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div>