163

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:

enter image description here

How can i fix it?

Judah Gabriel Himango
  • 58,906
  • 38
  • 158
  • 212
pawel
  • 5,976
  • 15
  • 46
  • 68

10 Answers10

286

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.

sigurdo
  • 80
  • 5
Ross
  • 18,117
  • 7
  • 44
  • 64
118

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

Ilia Ross
  • 13,086
  • 11
  • 53
  • 88
krzychu
  • 3,577
  • 2
  • 27
  • 29
27

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

http://codeply.com/go/w2MJngNkDQ

praj
  • 914
  • 7
  • 11
  • 1
    I tried all the other answers, - and this one was the only one that worked for me as well. I'm using Bootstrap v. 4.1.0. – Zeth Jul 14 '18 at 11:52
22

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

GiorgosK
  • 7,647
  • 2
  • 29
  • 26
12

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>
Mohan Dere
  • 4,497
  • 1
  • 25
  • 21
3

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>
Dedy Setiawan
  • 61
  • 8
2

float-*-right for Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
  • 6,780
  • 3
  • 52
  • 63
0

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>
hackdotslashdotkill
  • 42
  • 3
0

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>
Leonardo Hermoso
  • 838
  • 12
  • 26
0

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>
JavaProScript
  • 106
  • 8