Twitter Bootstrap "Dropdown Toggle" on "btn btn-block btn-lg btn-primary"?

Question

How to add "Dropdown Toggle" on "btn btn-block btn-lg btn-primary" button ?

I have link "btn btn-block btn-lg btn-primary" like this

<a href="#" class="btn btn-block btn-lg btn-primary">Download</a>

http://jsfiddle.net/9ky34/2/

I am trying to add "Dropdown Toggle" to above link by adding "btn-block btn-lg " in the class of button, and adding "btn-lg " in the dropdown class like this:

<div class="btn-group">
<button type="button" class="btn btn-block btn-lg btn-primary">Download</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<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/9ky34/3/

But it's not displaying on the same line, how can i fix this?

The dropdown is coming on the next line.

Answer 1

it is because of the btn-block class remove it, it sets display: block

<div class="btn-group" style="width: 100%">
    <button type="button" class="btn btn-lg btn-primary dropdown-toggle btn-block" data-toggle="dropdown">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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>

Demo: Fiddle