Twitter Bootstrap 3 Checkbox Won't Align with rest of Form - html

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>

Related

First three fields not aligned with others

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.

bootstrap3 form has text overlapping with dropdown

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>

Bootstrap: col-sm-6 expands above other columns on xs screen size

I'm experiencing an odd behaviour in Bootstrap where a col-sm-6 is expanding on top of the sibling column above it, which renders the sibling column unclickable.
Please see source code and live demo here: Codepen
Resize the output window to xs size (below 768px) to experience the issue).
The checkbox for 'As above' is unclickable because the phyiscal address 'Address line 1' is expanding above it, creating a sort of barrier.
The issue can be solved by adding 'col-xs-12' in addition to the 'col-sm-6', but Bootstrap should figure this one out by itself without this (as it normally does). Any ideas what is causing this?
EDIT:
One could argue that I should put all my fields in different rows, but for various reasons I'd like to keep everything within one row and let Bootstrap figure out the flow of the items, which normally works fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Postal address</h3>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPostalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalState">State*</label>
<select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
<option value="">Please Select</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
<div class="col-xs-12">
<h3>Physical address</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="checkbox checkbox-default">
<label>
<input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
<span class="icon"></span>
<span class="text">As above (use postal address)</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label for="inputPhysicalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalState">State*</label>
<input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
</div>
</div>
I think you're not clearing your floats properly across media queries.
Add .col-sm-6{overflow:hidden} to see if it solves it, then try to clear your floats whenever possible.
Also, read up on this, it might be helpful

How to align this bootstrap radio button?

PAGE IS HERE
I created radio button using following code and the button & the text comes next to each other. That's fine but it is not VERTICALLY middle aligned to the text input field which is placed left to the radio button.
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
PAGE IS HERE
I put .form-item label.option { vertical-align: middle; } but still the same result.
Then I tried margin-top and some other css styles but could not get what I want.
I want the both radio buttons(monthly, onetime AND Landline) look like following screenshot.
and
how can I adjust the page like screen shots.
[UPDATE]
Code for the section (row) as per Rachel's request (Anyhow by visiting this page you can have a look at the source code):
<div class="row">
<div class="col-md-3">
<div class="form-item form-type-textfield form-item-donation-amount form-group">
<input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-select form-item-donation-currency form-group">
<select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
<option value="DKK">DKK</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
</div>
Ok, firstly you need to put the surrounding div around the Land line element like you do with the monthly/one time fields and also make the wrappers for the monthly/one time so they are the same
<div class="row">
<div class="col-md-3">
<div class="form-item form-type-textfield form-item-donation-amount form-group">
<input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-select form-item-donation-currency form-group">
<select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
<option value="DKK">DKK</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div id="" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
</div>
and
<div class="col-md-4">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
</div>
</div>
Then create a new css rule
.form-item.form-type-radio {
padding-top: 0.5em;
margin-top: 0;
}
and this should fix your issues.
Hope that helps

Bootstrap 3: multiple select in input-group overlap

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>