Input group - two inputs close to each other

Question

How can I make input group involves two inputs?

<div class="input-group">     <input type="text" class="form-control" placeholder="MinVal">     <input type="text" class="form-control" placeholder="MaxVal"> </div> 

This doesn't work, they are horizontal instead of inline

Answer 1

working workaround:

<div class="input-group">     <input type="text" class="form-control input-sm" value="test1" />     <span class="input-group-btn" style="width:0px;"></span>     <input type="text" class="form-control input-sm" value="test2" /> </div> 

downside: no border-collapse between the two text-fields, but they keep next to each other

http://jsfiddle.net/EfC26/

Update

thanks to Stalinko

This technique allows to glue more than 2 inputs. Border-collapsing is achieved using "margin-left: -1px" (-2px for the 3rd input and so on)

<div class="input-group">   <input type="text" class="form-control input-sm" value="test1" />   <span class="input-group-btn" style="width:0px;"></span>   <input type="text" class="form-control input-sm" value="test2" style="margin-left:-1px" />   <span class="input-group-btn" style="width:0px;"></span>   <input type="text" class="form-control input-sm" value="test2" style="margin-left:-2px" /> </div> 

http://jsfiddle.net/yLvk5mn1/1/

Answer 2

It almost never makes intuitive sense to have two inputs next to each other without labels. Here is a solution with labels mixed in, which also works quite well with just a minor modification to existing Bootstrap styles.

Preview:

HTML:

<div class="input-group">   <span class="input-group-addon">Between</span>   <input type="text" class="form-control" placeholder="Type something..." />   <span class="input-group-addon" style="border-left: 0; border-right: 0;">and</span>   <input type="text" class="form-control" placeholder="Type something..." /> </div> 

CSS:

.input-group-addon {   border-left-width: 0;   border-right-width: 0; } .input-group-addon:first-child {   border-left-width: 1px; } .input-group-addon:last-child {   border-right-width: 1px; } 

JSFiddle: http://jsfiddle.net/yLvk5mn1/31/