Twitter bootstrap dropdown goes outside the screen - html

Question

I want to implement twitter bootstrap dropdown menu, here's my code:
<span class="dropdown">
</b>
<ul class="dropdown-menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li class="divider"></li>
<li>d</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?

Answer 1

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.

Answer 2

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

Answer 3

For Bootstrap 4, adding dropdown-menu-right works. Here's a working example..
http://codeply.com/go/w2MJngNkDQ

Answer 4

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

Answer 5

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;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="dropdown dropdown-pull-right btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Open Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

Answer 6

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>

Answer 7

float-*-right for Bootstrap 4
* = xs, sm, md, lg

Answer 8

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">
</b>
<ul class="dropdown-menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li class="divider"></li>
<li>d</li>
</ul>
</div>

Answer 9

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>

Answer 10

I encountered this issue recently, and I solved it by addind display="dynamic" to my ngbDropdown (using Angular 12, ngBootstrap 10 and Bootstrap 4):
<div class="row">
<div class="col">
<div ngbDropdown display="dynamic" class="d-inline-block dropdown-menu-right">
<button class="btn btn-outline-primary" id="navbarDropdownForm" ngbDropdownToggle>Sign in</button>
<div ngbDropdownMenu aria-labelledby="navbarDropdownForm">
<form class="px-4 py-3">
<div class="form-group">
<label for="navbarDropdownFormEmail">Email address</label>
<input type="email" class="form-control" id="navbarDropdownFormEmail" placeholder="email#example.com"
autocomplete="username">
</div>
<div class="form-group">
<label for="navbarDropdownFormPassword">Password</label>
<input type="password" class="form-control" id="navbarDropdownFormPassword" placeholder="Password"
autocomplete="current-password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>New around here? Sign up</button>
<button ngbDropdownItem>Forgot password?</button>
</div>
</div>
</div>
</div>