How to make multiple segmented inputs in one input group in Bootstrap
This is how it should look on the Airbnb home page http://airbnb.com
I tried .input-group-addon
and put another one in it <input>
like so:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<input type="text" id="nested-input" class="form-control">
</span>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
And it didn't work. Does Bootstrap support this style?
+3
source to share
2 answers
.nested-group input:focus {
box-shadow: none;
}
.nested-group input:first-child {
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.nested-group input {
margin-left: -5px;
border-radius: 0px;
}
.nested-group button {
margin-left: -5px;
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" role="form">
<div class="form-group nested-group">
<input type="text" id="left-input" class="form-control">
<input type="text" id="middle-input" class="form-control">
<button class="btn btn-primary" type="button">Go!</button>
</div>
</form>
+2
source to share
If you are using form-horizontal
and trying to do segmented inputs on a different column, try this short inline style:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">Telephone:</label>
<div class="col-sm-8">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input
type="text"
name="prefix[]"
placeholder="Prefix"
class="form-control"
style="float: left; width: 30%;"
title="Prefix"
>
<input
type="text"
name="number[]"
placeholder="Number"
class="form-control"
style="float: left; width: 40%;"
>
<input
type="text"
name="ext[]"
placeholder="Ext"
class="form-control"
style="float: left; width: 30%;"
>
<span class="input-group-btn">
<button
class="btn btn-default"
type="button"
onclick="removePhoneRow(this);"
>
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-12">
<button
type="button"
class="btn btn-warning btn-sm"
onclick="addPhoneRow(this);"
>
<span class="glyphicon glyphicon-plus"></span>
Click to add more
</button>
</div>
</div>
</div>
</div>
</form>
<script>
function addPhoneRow(button) {
var addPhone = '<div class="col-md-12"><div class="input-group"><input type="text" name="prefix[]" placeholder="Prefix" class="form-control" style="float: left; width: 30%;" title="Prefix" ><input type="text" name="number[]" placeholder="Number" class="form-control" style="float: left; width: 40%;" ><input type="text" name="ext[]" placeholder="Ext" class="form-control" style="float: left; width: 30%;" ><span class="input-group-btn"><button class="btn btn-default" type="button" onclick="removePhoneRow(this);" ><span class="glyphicon glyphicon-minus"><\/span><\/button><\/span><\/div><\/div>' + " \n";
$(addPhone).insertBefore($(button).parent());
}
function removePhoneRow(button) {
$(button).parent().parent().parent().remove();
}
</script>
+3
source to share