Create bootstrap form having horizontal and vertical form field

Question

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

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

Answer 1

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