Twitter bootstrap dropdown goes outside the screen

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.

Since Bootstrap v3.1.0 adding .pull-right is deprecated on dropdown menus. A .dropdown-menu-right should be added to ul.dropdown-menu instead. Docs

For Bootstrap 4, adding dropdown-menu-right works. Here's a working example..

http://codeply.com/go/w2MJngNkDQ

a solution that does not need modifying the HTML only the CSS is

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

Its particularly usefull for dynamically generated menus where its not always possible to add the recommended class dropdown-menu-right to the last element

You can use class .dropdown-pull-right with following css:

.dropdown-pull-right { float: right !important; right: 0; left: auto; } .dropdown-pull-right>.dropdown-menu { right: 0; left: auto; }

in Bootstrap 4 you can use .dropleft

just change to :

<span class="dropleft">

or

add .dropdown-menu-{lg,med,sm,xs}-right to your dropdown-menu

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

float-*-right for Bootstrap 4

* = xs, sm, md, lg

I can't leave a comment because my SO level is too low, but I just made sure that the parent container is set to "overflow:hidden" like so (also make sure position is set).

<div style="overflow:hidden;position:relative">
    <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>
</div>

If you are using Bootstrap 5, according to documentation:

Dropright: Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

<div class="btn-group dropend">
 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  Dropright
 </button>
 <ul class="dropdown-menu">
  <!-- Dropdown menu links -->
 </ul>
</div>

I encountered this issue recently, and I solved it by addind display="dynamic" to my ngbDropdown (using Angular 12, ngBootstrap 10 and Bootstrap 4):