Twitter Bootstrap inline input with dropdown

Question

I'm trying to display a text input inline with a dropdown button. I can't figure out how to do this though. Here's the HTML I've tried (I've put all of it on a single line with no results):

<div class="input-append">   <input type="text" placeholder="foo" class="input-mini">   <div class="btn-group">     <a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a>     <ul id="amount_type_options" class="dropdown-menu">       <li class="selected"><a href="#">10</a></li>       <li><a href="#">100</a></li>       <li><a href="#">1000</a></li>     </ul>   </div> </div> 

Is this possible?

Thank you

Answer 1

Current state: default implementation in docs

Currently there is a default implementation of input+dropdown combo in the documentation here (search for "Button dropdowns"). I leave the original solution for the record and for those who cannot use solution now included in the documentation.

Original solution

Yes, it is possible. As a matter of fact, there is one example in the Twitter Bootstrap documentation (follow the link and search "Examples" for dropdown buttons):

<div class="btn-group">     <a class="btn btn-primary" href="#">         <i class="icon-user icon-white"></i> User     </a>     <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">         <span class="caret"></span>     </a>     <ul class="dropdown-menu">         <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>         <li><a href="#"><i class="icon-trash"></i> Delete</a></li>         <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>         <li class="divider"></li>         <li><a href="#"><i class="i"></i> Make admin</a></li>     </ul> </div> 

If enclosed within text, it can look like this (with text on the button changed, nothing else):

EDIT:

If you are trying to achieve <input> with appended dropdown menu as in the dropdown buttons, then this is one of the solutions:

1. Add a btn-group class to the element that has input-append class,
2. Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append,
3. Override style for element matching .input-append .btn.dropdown-menu so it does not have float: left (otherwise it will get into next line).

The resulting code may look like this:

<div class="input-append btn-group">     <input class="span2" id="appendedInputButton" size="16" type="text">     <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">         <span class="caret"></span>     </a>     <ul class="dropdown-menu">         <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>         <li><a href="#"><i class="icon-trash"></i> Delete</a></li>         <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>         <li class="divider"></li>         <li><a href="#"><i class="i"></i> Make admin</a></li>     </ul> </div> 

with a little support from this style override:

.input-append .btn.dropdown-toggle {     float: none; } 

and give you the exact same result as this:

EDIT 2: Updated the CSS selector (was .dropdown-menu, is .dropdown-toggle).

Answer 2

As of Bootstrap 3.x, there's an example of this in the docs here: http://getbootstrap.com/components/#input-groups-buttons-dropdowns

<div class="input-group">   <input type="text" class="form-control" aria-label="...">   <div class="input-group-btn">     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>     <ul class="dropdown-menu dropdown-menu-right" 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><!-- /btn-group --> </div><!-- /input-group -->