CODEWITHSUNDEEP
formstwitter-bootstrap
RedSands
RedSands

Reputation: 143

Lining up fields using Bootstrap with mixed form-inline and horizontal style

I have a form with some form-inline sections, as seen in the image and Demo below.

ISSUE: I would like the field rows to line up on the right, like they do on the left. I have been unable to determine what is limiting their (first, last, email, confirm email) width or how to get them to use the full space.

Note: I have reviewed many questions without a resolution to this specific issue. EG. bootstrap form group, mixed inline and horizontal style . Among other examples.

enter image description here

Demo: http://plnkr.co/edit/ImNP7IftPdk3sBDmJewe?p=preview

    <div class="col-md-12">
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <label class="control-label" for="first_name">Name</label>
                    <div class="form-inline form-group">
                        <input id="first_name" type="text" class="contactInput form-control" name="first_name" placeholder="First">
                        <input id="last_name" type="text" class="contactInput form-control" name="last_name" placeholder="Last">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label for="email">Email</label>
                    <div class="form-inline form-group">
                        <input id="email" type="email" class="contactInput form-control"  name="email" placeholder="Email">
                        <input id="confirm_email" type="email" class="contactInput form-control"  name="confirm_email" placeholder="Confirm Email">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="phone_number">Phone</label>
                        <input id="phone_number" type="phoneUS" class="contactInput form-control" name="phone_number"  placeholder="##########"  maxlength="10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="address_1">Address 1</label>
                        <input id="address_1" type="text" class="contactInput form-control" name="address_1">
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 3782

Answers (1)

RedSands
RedSands

Reputation: 143

The solution is actually NOT to mix form-inline into the form CSS. Rather, use columns. It seems fairly obvious to me after the fact, but hopefully someone stumbling around out there will find this answer useful.

Solution Demo: http://plnkr.co/edit/ImNP7IftPdk3sBDmJewe?p=preview

        <div class="col-md-12">
            <div class="row">
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="first_name">Name</label>
                        <input id="first_name" type="text" class="contactInput form-control" name="first_name" placeholder="First">
                  </div>
              </div>
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="last_name">&nbsp;</label>
                     <input id="last_name" type="text" class="contactInput form-control" name="last_name" placeholder="Last">
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="email">Email</label>
                        <input id="email" type="text" class="contactInput form-control" name="email" placeholder="Email">
                  </div>
              </div>
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="email_confrim">&nbsp;</label>
                     <input id="email_confrim" type="text" class="contactInput form-control" name="email_confrim" placeholder="Confirm Email">
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="phone_number">Phone</label>
                        <input id="phone_number" type="phoneUS" class="contactInput form-control" name="phone_number"  placeholder="##########"  maxlength="10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="address_1">Address 1</label>
                        <input id="address_1" type="text" class="contactInput form-control" name="address_1">
                    </div>
                </div>
            </div>
    </div>

Upvotes: 5

Related Questions