How to create connected buttons to control the form using bootstrap 3?

Question

I am trying to get buttons on these form elements:

Download Example

to look like controls in this example:

Bootsnipp example

I'm basically trying to recreate the Bootsnipp example using the Bootstrap3 controls [Bootstrap 3.1.1].

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

I would try using a bootstrap form generator that would give 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> 

Like Shawn's answer, which I did not try, I found that most of these solutions broke when trying to apply the column size to the parent element.

Answer 1

You need to wrap the button in the range with the class .input-group-btn as follows:

 <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 lacked classes and wrappers, and I had others that I am not familiar 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 the vertical span when it crashes, you need another wrapper (bootstrap forms - heavy shell) inside the "form-group" column:

 <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> 

Answer 3

What you are looking for are button groups:

 <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>