skip to Main Content

I have an issue with the button dropdown from Bootstrap-Twitter 3.



<div class="input-group">
    <input type="text" class="form-control">
    <!-- Split button -->
    <div class="input-group-btn">
     <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>

In the JSFiddle above, you can see an input stick with a dropdown button at its right.

The problem is that the list of the dropdown button is displayed in a way that the list is cutted (the viewport should not expand itself, however this is what happens).


How can I tell this element to display the list from the right to the left (reverse of the current behaviour) ?



  1. Try Use :

    class="dropdown-menu pull-right"

    As you can see here : Updated Fiddle

    This will ensure the dropDown menu is pulling to the right, which gives it float:right!important.

    This will ensure it’s not hidden behind.

    EDIT: Rory McCrossan’s answer is the recommended solution for this question

    Login or Signup to reply.
  2. You can do this by CSS (overwrite the default rule) or you can custom with a new class:

    .dropdown-menu {
      left: auto;

    In fact is the same thing this class .pull-right from bootstrap library do:


    .pull-right {
      left: auto;
    Login or Signup to reply.
  3. From the documentation:

    By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

    <ul class="dropdown-menu dropdown-menu-right">
        <!-- your li elements... -->

    Updated fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top