Twitter bootstrap dropdown goes outside the screen
css, html, twitter-bootstrap
Solution
adding `.pull-right` to `ul.dropdown-menu` should do it
Deprecation Notice: As of Bootstrap v3.1.0, `.pull-right` on dropdown menus is deprecated. To right-align a menu, use `.dropdown-menu-right`.
Deprecation Notice 2: As of Bootstrap v5, `.dropdown-menu-right` is deprecated. For Bootstrap v5, use `.dropdown-menu-end`.
Problem
I want to implement twitter bootstrap dropdown menu, here's my code: ``` <span class="dropdown"> <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li class="divider"></li> <li><a href="#">d</a></li> </ul> ``` Dropdown works good, my dropdown is placed next to right edge of the screen and when I click my dropdown-toggle, the list goes outside the screen. It looks like on the screen: How can i fix it?