Input group - two inputs close to each other
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/
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/