Bootstrap dropdown menu to open on the left

Question

I have a dropdown menu from bootstrap that I am aligned on the right of my page and I want to open to the left. I tried to put pull-left but all it does is moving my button to the left part of the div. Why is that?

<button class="btn btn-link dropdown pull-left account-menu-btn">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="http://placehold.it/40X40" class="img-circle">
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">
                            Create
                        </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="#">
                            Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Log out
                        </a>
                    </li>
                </ul>
            </button>

and here is my account-menu-btn style:

.account-menu-btn {
    float: right;
}

I needed pull-right, for the submenu to be displayed on the left. Good logic, bootstrap... — v.g.

Peter Wilson Peter Wilson · Accepted Answer · 2016-03-11T10:41:24

the issue is that the dropdown has a position absolute and the button itself has a relative position which make the dropdown appear within the width of the button

so you have to clear the relative positioning from the button by giving it position:static; and apply the position:relative; to your wrapper div

.dropdown, .dropup{
  position:static!important;
}
.wrapper{
  position:relative;
  width:80%;
}
ul.dropdown-menu{
  right:auto!important;
  left:0!important;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="wrapper container">
<button class="btn btn-link dropdown pull-right account-menu-btn">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="http://placehold.it/40x40" class="img-circle">
                </a>
                <ul class="dropdown-menu pull-left" role="menu">
                    <li>
                        <a href="#">
                            Create
                        </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="#">
                            Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Log out
                        </a>
                    </li>
                </ul>
            </button>
            
</div>

Bootstrap dropdown menu to open on the left

1 Answers