lg vs sm in input groups of bootstrap

Question

I am unable to get the following working:

<div class="input-group-sm">
                        <input type="text" class="form-control">
                        <div class="input-group-sm">
                            <button class="btn btn-default btn-sm" type="button">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                            <button class="btn btn-default btn-sm" type="button">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>

I wanted to have the textbox and both buttons to be on the same line, tied to each other. The above code makes the buttons to be on second line. Can anyone help me on this.

It works well if replace "sm" with "lg" everywhere.

Answer 1

DEMO: http://jsbin.com/OjahitE/1

http://jsbin.com/OjahitE/1/edit

<div class="input-group input-group-sm">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button class="btn btn-default" type="button"> 
  icon here
 </button>
<button class="btn btn-default" type="button"> 
  icon here
 </button>
</div>
</div>

More support is being added, see pull-request: https://github.com/twbs/bootstrap/pull/11910

Answer 2

Try this..

  <div class="input-group input-group-sm">
    <input type="text" class="form-control">
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  </div>

Bootply: http://bootply.com/101146