CODEWITHSUNDEEP
htmltwitter-bootstrap
Craig
Craig

Reputation: 36856

Twitter Bootstrap Horizontal form

I am trying to create a form using Bootstrap where the fields are horizontal but the labels are above the field. The HTML i have is 

<form class="form-inline">
    <fieldset class="span6">
        <legend>Personal Details</legend>

        <label>Firstname</label><input class="span12" type="text">
        <label>Surname</label><input class="span12" type="text">

        <label for="PhoneNumber">Phone Number</label><input id="PhoneNumber" class="span6" type="text">
        <label for="MobilePhone">Mobile Phone</label><input id="MobilePhone" class="span6" type="text">

        <label>Email Address</label><input class="span12" type="text">

    </fieldset>
    <fieldset class="span6">
        <legend>Address Details</legend>
    </fieldset>
</form>

This produces a form that looks like

No good form

But what I want is something that looks like

Good form

What Twitter Bootstrap magic do I need for this?

Upvotes: 5

Views: 6698

Answers (1)

Craig
Craig

Reputation: 36856

Looks like I managed to solve my own problem. Html changed to 

<form class="form-inline">
    <fieldset class="span6">
        <legend>Personal Details</legend>

        <label>Firstname</label><input class="span12" type="text">

        <label>Surname</label><input class="span12" type="text">

        <div class="controls-row">
            <div class="control-group span6">
                <label for="PhoneNumber">Phone Number</label>
                <input id="PhoneNumber" class="span12" type="text">
            </div>
            <div class="control-group span6">
                <label for="MobilePhone">Mobile Phone</label>
                <input id="MobilePhone" class="span12" type="text">
            </div>                          
        </div>

        <label>Email Address</label><input class="span12" type="text">

    </fieldset>
    <fieldset class="span6">
        <legend>Address Details</legend>
    </fieldset>
</form>

Upvotes: 10

Related Questions