Bootstrap 3 input-append upgrade

Question

I'm upgrading to Bootstrap 3, but I just can't figure out how to upgrade my old input-appends.

I had something like this:

<div class="input-append">   <select>     <option>hi</option>     <option>hi2</option>   </select>   <span class="input-group-addon"></span>   <input type="submit" class="btn" value="valami"> </div> 

Preview: http://bootply.com/75910

In Bootstrap 3, this is the closest I could get

<div class="input-group">   <select class="form-control">     <option>hi</option>     <option>hi2</option>   </select>   <span class="input-group-addon"></span>   <input type="submit" class="form-control btn btn-default" value="valami"> </div> 

Preview: http://bootply.com/75912

If I remove that span it gets perfect, but they are in different lines.

Any idea how to do this properly?

Answer 1

This is documented here and here:

Remove input-prepend and input-append for singular .input-group. The classes have changed for the elements within, and require a bit more markup to use buttons:

• Use .input-group as the parent class around the input and addon.
• For text based prepends/appends, use .input-group-addon instead of .addon.
• For button prepends/appends, use .input-group-btn and place your .btn within that element.

Example:

<div class="container">   <div class="row">     <div class="col-sm-3 col-xs-12 col-lg-3">       <form class="form-search">           <div class="input-group">               <input type="text" class="form-control " placeholder="Text input">               <span class="input-group-btn">                   <button type="submit" class="btn btn-search">Search</button>               </span>           </div>       </form>     </div>   </div> </div> 

EDIT: Working examples from @kviktor and @max4ever:

http://bootply.com/75917

http://bootply.com/78014