bootstrap drop down button aligns on the wrong side

Question

When you click on the dropdown ul, the list items ( <li> ) are shown all the way to the left.. As you can see in my simplified jfiddle example: http://jsfiddle.net/3bfvvkbh/

<div> 

<div class="btn-group">
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">Action</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

    </button>
    <ul id="yearlist" class="dropdown-menu" role="menu">
        <li> <a>2010</a>

        </li>
    </ul>
</div>

</div>


$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>"); 
});
});

Answer 1

The dropdown has be in a seperate btn-group.

See my updated fiddle and also the Bootstrap Docs - #Nested Button groups

 $(document).ready(function () { $(function () { var append = function (txt) { $("#yearlist").append('<li>' + txt + '</li>'); }; append("<a>2012</a>"); append("<a>2014</a>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div> <div class="btn-group"> <button type="button" class="btn btn-info">random button</button> <button type="button" class="btn btn-info">random button</button> <button type="button" class="btn btn-info">random button</button> <div class="btn-group"> <button type="button" class="btn btn-info">Action</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul id="yearlist" class="dropdown-menu" role="menu"> <li> <a>2010</a> </li> </ul> </div> </div> </div> 

Answer 2

Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.

<div class="btn-group">
    <a href="#" class="btn btn-default">Dropdown</a>
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></a>
    <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 class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

http://jsfiddle.net/3bfvvkbh/2/

Answer 3

Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right" , Demo

<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
    <li> <a>2010</a>    
    </li>
</ul>

Answer 4

Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu

See: http://jsfiddle.net/3bfvvkbh/6/

$(document).ready(function () {
    $(function () {
        var append = function (txt) {
            $("#yearlist").append('<li>' + txt + '</li>');
        };
        append("<a>2012</a>");
        append("<a>2014</a>");
    });
});