What provides the space in between the labels and inputs when using bootstrap?
In the picture above you will see mailing address 1 has a nice space after the input but the rest are pretty close together. What is causing this space? I want it in between all of mine. Just curious of what is causing it.
<div class="row">
<div class="col-lg-12">
<label for="firstname_<cfoutput>#Add#</cfoutput>">Name of <cfoutput>#numberMapping[Peoplecount]#</cfoutput> owner as it appears on driver license:</label>
<div class="form-group">
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="firstname_#Add#" id="firstname_#Add#" placeholder="First" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["firstname_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="middlename_#Add#" id="middlename_#Add#" placeholder="Middle" maxlength="100" value="#session.checkout.info["middlename_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="lastname_#Add#" id="lastname_#Add#" placeholder="Last" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["lastname_" & Add]#" /></cfoutput>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label for="birthmonth_<cfoutput>#Add#</cfoutput>">Date of birth:</label>
<div class="form-group">
<div class="col-lg-4">
<cfinclude template="../ddl/birthmonth.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthday.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthyear.cfm">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-lg-12">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-7">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-2">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-5">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="street_<cfoutput>#Add#</cfoutput>">Mailing address 1:</label>
<cfoutput><input type="text" class="form-control input-sm" name="street_#Add#" validateat="onSubmit" validate="maxlength" id="autocomplete#Add#" size="54" maxlength="120" required="yes" onFocus="geolocate()" value="#session.checkout.info["street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-7">
<label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing address 2:</label>
<cfoutput><input type="text" class="form-control input-sm" name="m2street_#Add#" placeholder="Apartment, suite, unit etc. (optional)" validateat="onSubmit" validate="maxlength" id="route#Add#" size="54" maxlength="120" value="#session.checkout.info["m2street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-4">
<label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
<cfoutput><input type="text" class="form-control input-sm" name="city_#Add#" validateat="onSubmit" validate="maxlength" id="locality#Add#" size="30" maxlength="50" required="yes" value="#session.checkout.info["city_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<label for="state_<cfoutput>#Add#</cfoutput>" class="labelspace">State:</label>
<cfoutput><input type="text" class="form-control input-sm" name="state_#Add#" validateat="onSubmit" validate="maxlength" id="administrative_area_level_1#Add#" size="26" maxlength="50" required="yes" value="#session.checkout.info["state_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label for="postal_<cfoutput>#Add#</cfoutput>">Zip code:</label>
<cfoutput><input type="text" class="form-control input-sm" name="postal_#Add#" id="postal_code#Add#" size="8" maxlength="12" required="yes" value="#session.checkout.info["postal_" & Add]#" /></cfoutput>
</div>
</div>
</div>
For 'Mailing address 1', your form-group
is inside the col-lg-7
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With