bootstrap form group, mixed inline and horizontal

Question

I want to create a form layout like this:

First Name: ______  Last Name: _____
Email: _____________________________

Each label has to be wrapped within the same "form-group" as its input field.

This style is mixed of form-inline and form-horizontal, how should I implement this?

Answer 1

You can use columns as well, here's the html code:

<div class="row">
    <div class="container">
        <form action="" class="form-horizontal">
            <div class="form-group row">
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="fname">First Name:</label>
                    <input type="text" class="form-control" name="fname" id="fname" value="">
                </div>
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="lname">Last Name:</label>
                    <input type="text" class="form-control" name="lname" id="name" value="">
                </div>
            </div>
            <div class="form-inline col-md-12 col-md-12 col-sm-12 col-xs-12">
                <label for="email">Email:</label>
                <input class="form-control" type="text" name="email" id="email" value="">
            </div>
        </form>
    </div>

And the css code is : (maybe there's some extra properties though that are not necessary) :

.row{
    display:block;
}
.form-inline{
        white-space:nowrap;
}
input{
    width:30% !important;
    display:inline-block;
}
label{
    display:inline-block;
    float:left;
}

Here's a jsfiddle link : Demo

Answer 2

You can use something like this:

<div class="container">
        <div class="panel-body">
          <form role="form" id="abc">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="firstName">First name</label>
                        <input class="form-control" name="cardNumber" placeholder="------------------" />
                    </div>                            
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="lastName">Last name</label>
                        <input class="form-control" name="lastName" placeholder="--------------------"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input class="form-control" name="email" placeholder="------------------" />
                    </div>                            
                </div>
            </div>
          </form>
        </div>
    </div>