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

Answer 1

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>