Twitter bootstrap dropdown goes outside the screen
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
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
For Bootstrap 4, adding dropdown-menu-right
works. Here's a working example..
http://codeply.com/go/w2MJngNkDQ
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
.