CODEWITHSUNDEEP
csstwitter-bootstrap
David Brierton
David Brierton

Reputation: 7397

Bootstrap grid system lining up two labels next to each other

I am trying to figure out how to line these two labels and inputs together. Will someone please tell me where I may be going wrong? I just want them to be lined up next to each other.

<div class="row">
    <div class="col-lg-12">
        <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <div class="form-group">
                <div class="col-xs-4">
                    <cfinclude template="../ddl/gender.cfm">
                </div>
            </div>
    </div>
    <div class="col-lg-12">
        <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-1">
                    <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-3">
                    <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>

enter image description here

How do I put the Driver License Number on the same line as sex?

EDIT

Changing it to col-lg-6 puts them on the same line but they still end up looking like this? I am trying to have them not look so awful.

enter image description here

EDIT 2

<div class="row">
    <div class="col-lg-5">
        <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <div class="form-group">
                <div class="col-lg-10">
                    <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>

enter image description here

How do I remove Driver license number more to the left to make it look better?

Upvotes: 1

Views: 1483

Answers (2)

David Katona
David Katona

Reputation: 354

You should use col-lg-6 classes instead of col-lg-12 to enable these two elements to take 6-6 column. So they can fit into the very same row.

UPDATE:

<div class="row">
<div class="col-lg-4">
    <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
        <div class="form-group">
            <div class="col-xs-4">
                <cfinclude template="../ddl/gender.cfm">
            </div>
        </div>
</div>
<div class="col-lg-8">
    <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-4">
                <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-4">
                <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>

Upvotes: 1

Luca Angioloni
Luca Angioloni

Reputation: 2253

They are both 12 columns wide. Try make them 6, hence half the size.

Upvotes: 1

Related Questions