Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.


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;
}
<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>

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