how to create connected buttons for form controls with bootstrap 3?

Question

I'm trying to get the buttons on these form controls:

Bootply Example

to look like the controls in this example:

Bootsnipp Example

Basically I am trying to re-create the Bootsnipp example using Bootstrap3 [Bootstrap 3.1.1] form controls.

Here is the HTML:

<div class="container">

  <div class="row">

    <div class="controls"> 

      <div class="entry form-group col-sm-4">
        <div class="input-group">
          <input class="form-control" name="fields[]" type="text" placeholder="Type something">
          <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
        </div>
      </div>

      <div class="entry form-group col-sm-4">
        <div class="input-group">
          <input class="form-control" name="fields[]" type="text" placeholder="Type something">
          <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
        </div>
      </div>

      <div class="entry form-group col-sm-4">
        <div class="input-group">
          <input class="form-control" name="fields[]" type="text" placeholder="Type something">
          <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
        </div>
      </div>

    </div>

  </div>

</div>

UPDATE

Would up using a bootstrap form generator that gave me this:

<div class="tag-controls"> 

        <div class="entry col-sm-4 form-group ">
          <div class="input-group">
            <input class="form-control" name="tags[]" type="text" placeholder="Type something" />
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button" data-target="tag-controls"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

Similar to Shawn's answer, which I didn't try I found most of these solutions broke when trying to apply the column sizing to a parent element.

Answer 1

You need to wrap the button in a span with class .input-group-btn like so:

<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn"><!-- DO THIS -->
  <button class="btn btn-success btn-add" type="button">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

DEMO: http://www.bootply.com/BNUUlFK5xX

Answer 2

You were missing classes and wrappers and had others that I am not familiar with with 3.x

http://www.bootply.com/V5fU59ukqE

<div class="container">

      <div class="row">


            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>

            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>

            <div class="col-sm-4">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>


      </div>

    </div>

For Vertical spacing when it collapses, you need yet another wrapper (Bootstrap forms are wrapper heavy) just inside the column "form-group":

<div class="col-sm-4">
              <div class="form-group">
              <div class="input-group">
              <input class="form-control" name="fields[]" placeholder="Type something" type="text">
              <span class="input-group-btn">
              <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button>
              </span>
            </div>
           </div>
    </div>