I have a problem joining multiple select tags into .input-group.
Here is my code:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</form>
The problem is as follows:
In the last form-group, after the Label 3, three span's with select inside them have higher width then they should have and they overlap to the right and left of their input-group container (about 15 px).
Here is jsfiddle demostrating the problem (just click on first or third select in the last row)
Made another div for using class="form-group", See DEMO on full page mode in snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 2</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="col-md-6">
<div class="input-group ">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
change HTML
<form class="form-horizontal container-fluid" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
</form>
https://jsfiddle.net/qrtcq8bs/4/
just add
the margin-left:0; & margin-right:0;
in the form-group
because by default is negative
<div class="form-group" style="margin-left:0 !important; margin-right:0 !important;">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
Related
My problem is that first three fields are a little more to the right than the other fields. I don't know how to align those fields with the others.
I have an example on code pen.
Code for one of the problematic fields:
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<input type="text" id="inputACCO_NME" name="cACCO_NME" class="form-control" placeholder="#iLocalization._iTTmvc(Context, "#Enter few letters of client or VAT#")" value="#Model.cACCO_NME" />
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="#Model.iACCO_KEY" />
</div>
It looks like you were just missing a closing form-group DIV tag for your Kontact row, before the clearfix:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal do-not-submit" role="form" id="formJERECEProperties">
<input type="hidden" id="iRECE_KEY" name="iRECE_KEY" value="180001334">
<input type="hidden" id="hidden_cRECE_SRT" name="cRECE_SRT" value="6">
<input type="hidden" name="iENTE_KEY" value="110000007">
<input type="hidden" name="iBUUN_KEY">
<br>
<h3>testing</h3>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Testing</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputRECE_DBO" class="col-sm-2 control-label">Datum izposoje:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="b53b663f-86cb-422c-9b2a-a407990788e5" id="inputRECE_DBO" data-editable="1" data-default="true" value="08.03.2018" name1="dRECE_DBO">
</div>
<label for="inputRECE_DRE" class="col-sm-2 control-label">Datum vračila:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="a41fa57c-4654-4f13-a5eb-c4abb56a5950" id="inputRECE_DRE" data-editable="1" data-default="true" value="09.03.2018" name1="dRECE_DRE">
</div>
</div>
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" id="inputACCO_NME" name="98a4e8a7-55cb-4ab7-b075-7ab426566f5b" class="form-control ui-autocomplete-input" placeholder="Vpišite nekaj črk partnerja ali IDDDV"
value="" autocomplete="off" name1="cACCO_NME">
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="170000209" tabindex="-1">
</div>
<div class="form-group">
<label for="selectCONT_KEY" class="col-sm-2 control-label">Kontakt:</label>
<div class="col-sm-3">
<select id="selectCONT_KEY" class="form-control">
</select><input type="hidden" id="hidden_iCONT_KEY" name="iCONT_KEY">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group col-sm-12"></div>
<div class="form-group">
<label for="inputRECE_NME" class="col-sm-2 control-label">Ime reverza:</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="ead8d066-2618-4ed2-b03e-84c6cb46da4d" id="inputRECE_NME" value="" name1="cRECE_NME">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Skladišče:</label>
<div class="col-sm-3">
<select id="inputDIVI_KEY" name="iDIVI_KEY" class="form-control">
<option value="140001070">Centralno skladišče</option>
</select>
</div>
<div class="col-sm-7"> </div>
</div>
<div class="form-group">
<label for="inputRECE_TEL" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="4c40d2be-7f87-4faf-a6ba-0ff9b95be11b" id="inputRECE_TEL" value="" name1="cRECE_TEL">
</div>
<label for="inputRECE_MOB" class="col-sm-1 control-label">Mobilni tel.:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="958d73bd-723b-4234-b625-1927e9cab407" id="inputRECE_MOB" value="" name1="cRECE_MOB">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="inputRECE_EML" class="col-sm-2 control-label">E-pošta:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="4f653c8e-5613-449c-9b85-6850c8c857d7" id="inputRECE_EML" value="" name1="cRECE_EML">
</div>
<div class="col-sm-5">
</div>
</div>
<div class="form-group">
<label for="inputRECE_NTO" class="col-sm-2 control-label">Opomba:</label>
<div class="col-sm-7">
<textarea class="form-control" id="inputRECE_NTO" name="cRECE_NTO">Prevzel je:
2 kom line
2 kom corner</textarea>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="form-group">
<label for="selectRECE_STA" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<select id="selectRECE_STA" name="cRECE_STA" class="form-control">
<option value="A" selected="">Osnutek</option>
<option value="B">Izdan</option>
<option value="9">Izbrisan</option>
</select>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</form>
The elements (in your codepen code) have different padding values due to different classes applied to them, which causes the different distance/width. Use a common class for all similar elements and a highly specific CSS selector to overwrite those settings with a common padding setting.
I'm having some trouble with a Twitter Bootstrap form alignment. I have a checkbox that causes the below div's to incorrectly line up with the grid because it's height is only 70px tall when the div next to it is 74px. I could add the CSS to force it to the pixel height needed (see id "test") but I don't want this stay a fixed height when content responds for smaller screens. What would be the best way to fix this?
<div class="container-fluid appointment">
<div class="container">
<div class="row">
<h2 class="text-center">Appointment Request</h2>
<form>
<div class="col-sm-4">
<div class="form-group">
<label for="">Phone Number:</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<label for="petname">Pet's Name:</label>
<input type="text" class="form-control" id="petname">
</div>
</div>
<div class="col-sm-5" id="test">
<div class="form-group">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="pettype">Pet Type:</label>
<select class="form-control" id="pettype">
<option>Select Pet Type...</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="breed">Breed Type:</label>
<select class="form-control" id="breed">
<option>Select Breed...</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="age">Pet Age:</label>
<select class="form-control" id="age">
<option>Select Pet Age...</option>
<option value="less than 1">Less than 1 year</option>
<option value="1">1 Year</option>
</select>
</div>
</div>
<div class="col-sm-12 text-center">
<div class="form-group">
<button type="submit" class="btn btn-lg">Send Appointment</button>
</div>
</div>
</form>
</div>
</div>
</div>
just add a class "clearfix" for the div containing the checkbox as
<div class="col-sm-5" id="test">
<div class="form-group clearfix">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
I am trying to create a form that looks like this:
What I have come up with looks like this. I either can have the dropdown take up the correct amount of space, but then the text is underneath, or have the text next to the dropdown and everything gets smushed.
I'm not sure what I'm doing wrong. Here is the html:
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<div class="form-group">
<select class="liveSyncSchedule form-control"></select>
</div>
<div class="form-group">{{t "templates.scheduler.seconds"}}</div>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
All help is greatly appreciated!
The layout is messed because form-group class is not handled properly. Try this,
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<select class="liveSyncSchedule form-control"></select>
<span>{{t "templates.scheduler.seconds"}}</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
</form>
Thanks!
Here is a simplified fiddle: https://jsfiddle.net/mz1xgr38/
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Fire every</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-md-6">
Seconds
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 ">
<div class="checkbox">
<label>
<input type="checkbox" />Enabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Persisted
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Misfire policy</label>
<div class="col-sm-9">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</form>
Due to the boot strap design, the keyboard tab key is working vertically(col wise) instead of horizontally.
Can I make the keyboard tab key behavior horizontal(default behavior) without changing the design
This is the section of code.
<div class="col-md-4">
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="typeId" required=""><option value="" class="" selected="selected">--SELECT--</option>
<option label="Employment" value="number:2">Employment</option>
<option label="Female" value="number:3">Female</option>
<option label="Food" value="number:4">Food</option>
<option label="Male" value="number:1">Male</option>
</select>
</span>
</div>
<div class="form-group col-md-12" ">
<span class="col-md-6">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="nId" ng-options="non.nId as non.nlity for non in List" ng-invalid-required" name="nationality" id="nationality" required="">
</select>
</span>
</div>
<div class="form-group col-md-12">
</div>
<div class="form-group col-md-12">
<label class="col-md-6" for="profession">Profession:</label>
<span class="col-md-6">
<select ng-model="rpationId" ng-options="ocp.rpationId as ocp.occupation for ocp in occupationList" >\
</select>
</span>
</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12" ng-class="{ 'has-error' : regCtrl.userForm.mmpId.$invalid && regCtrl.userForm.mmpId.$dirty }">
<label class="col-md-6" for="mmpId">MMP Id: *</label>
<span class="col-md-6">
<input type="text" name="mmpId" class="form-control ">
</span>
<div class="col-sm-6 error-color ng-scope ng-active" >
<span ng-message="required" class="ng-scope">This field is required</span>
</div>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="name">Name: *</label>
<span class="col-md-6">
<input type="text" name="name" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="dob">Date of Birth: *</label>
<span class="col-md-6">
<input type="date" name="dob" ng-maxlength="11">
</span>
</div>
<div class="form-group col-md-12" ng-class="">
<label class="col-md-6" for="contactNo">Contact No: *</label>
<span class="col-md-6">
<input type="number" name="contactNo" required="">
</span>
</div>
</div>
This is because of your grouping of the form elements. You are grouping the elements column wise hence the tab works column wise.
You have grouped 4 form elements in first col-md-4 and the next 4 in the second col-md-4 so default tab control will first cover first col-md-4 elements and then the next col-md-4 elements.
Either use tabindex or change your layout to row wise as below:
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
Hope it helps.
I would like to group the radio button and bootstrap select but they're not inline.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"><span class="input-group-addon"> Preset Size (<b>inch</b>):
</span></label>
<div class="col-md-6">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div> <!-- Radio + Dropdown -->
</form>
</div> <!-- container -->
and I also want to group 2 text boxes together with the label to create user input.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-sm-4">
<label> x </label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</form>
</div>
Here's the output screenshot.
You may need to re-arrange your code a bit to fit bootstrap's use.
Firstly, use .form-group - also put element in rows when possible.
Something along the lines of:
ps you may have to adjust this a bit but it should give you a good place to start from
.form-inline input.form-control {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-6">
<input name="radioGroup" id="radio1" value="option1" type="radio" />Preset Size (<b>inch</b>):
</label>
<div class="col-xs-5">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36”x84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-5">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio">Custom Size:
</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-xs-1">
<label>x</label>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</form>
</div>
You forgot the row div. whenever you are using bootstrap layout with columns- you need to nest the columns div inside a row div:
<div class="row">
<div class="col-sm-4"> first third</div>
<div class="col-sm-4"> second third</div>
<div class="col-sm-4"> third third</div>
</div>
Read the bootstrap doc for more information
Here are two ways you can do this depending on if you want all the elements in one row or not. It's just utilizing input-groups and not much else.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>