Struggling to match the size of the radio button area (input-group-addon) in col-sm-4 and col-sm-6 columns? Considering using min-width to achieve a consistent width but finding no success? Seeking uniform width for radio button controls? Check out this visual example showcasing the issue: first radiobutton wider than the second input-groups. imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
View the fiddle here: https://jsfiddle.net/DTcHh/20504/