Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap spacing in between labels and inputs

What provides the space in between the labels and inputs when using bootstrap?enter image description here

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>
like image 592
David Brierton Avatar asked Sep 03 '25 05:09

David Brierton


1 Answers

For 'Mailing address 1', your form-group is inside the col-lg-7.

like image 195
Ryan Gee Avatar answered Sep 04 '25 21:09

Ryan Gee