CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
user3150930
user3150930

Reputation: 53

Create bootstrap form having horizontal and vertical form field

Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?

enter image description here

Something like this?

in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?

<form role="form">
            <div class="form-group">
                 <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
<div class="form-group">
                 <label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
                </div>
            <div class="form-group">
                 <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>

            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>

I want the cvv to be aligned with the first form field

Upvotes: 6

Views: 9699

Answers (2)

svin
svin

Reputation: 149

Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.

<div class="form-group form-inline">
    <label class="control-label">Expiry date(MM/YYYY) (required)</label>   
        <input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
        <input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
    </div>
</div>

Upvotes: 0

Emmanuel John
Emmanuel John

Reputation: 2325

Wrap your input fields in a div and assign a col-sm-x class to it e.g:

<div class="form-group">
    <label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
    </div>
</div>

Also add a col-sm-x to your labels

For columns:

<div class="form-group">
    <label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
    </div>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
    </div>
</div>

Finally, class of form should be form-horizontal Play with the col width as you like

Upvotes: 6

Related Questions