Bootstrap padding or margin between elements on same line - css

Question

I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.

Answer 1

You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>