CODEWITHSUNDEEP
twitter-bootstrap
Praveen Reddy
Praveen Reddy

Reputation: 217

how to display 2 form fields on same line with bootstrap

I am creating a form in bootstrap which should be responsive. See the below code.

<form novalidate="novalidate" class="form-inline">
        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputFirstName">First name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputLastName">Last name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputMiddleName">Middle Name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputMiddleName" ng-model="patient.middleName" placeholder="Middle name"/>
            </div>
        </div>
</form>

I need to have the 2 fields(firstname and lastname) on same line and middle name in other line. and there are around 10 fields in this form.

When i use the form-inline the 3 fields are arranged in one line and there is no space between the fields of rows.

How should i understand the .col css. How is this related to responsive.

Upvotes: 2

Views: 6941

Answers (2)

Praveen Reddy
Praveen Reddy

Reputation: 217

to get 2 fields in the same line write those 2 fields under one form_group and change the .col css as below. City and State fields displayed in same line.

<div class="container-fluid">
<div class="col-md-4">
      <form class="form-horizontal" role="form">
        <fieldset>

          <legend>Details</legend>

          <div class="form-group">
            <label class="col-sm-3 control-label" for="inputFirstName">First Name:</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName" placeholder="First name"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label" for="inputLastName">Last Name:</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName" placeholder="Last name"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">city:</label>
            <div class="col-sm-4">
              <input class="form-control" type="text" id="inputCity" ng-model="patient.city" placeholder="city"/>
            </div>

            <label class="col-sm-2 control-label" for="textinput">state</label>
            <div class="col-sm-4">
              <input class="form-control" type="text" id="inputState" ng-model="patient.state" placeholder="State"/>
            </div>
          </div>
        </fieldset>
      </form>
</div>
</div>

Upvotes: 1

U r s u s
U r s u s

Reputation: 6968

I have done a demo that should fit your requirements.

I have changed the form-group classes to col-md-12 to span the whole screen and wrapped the form in container-fluid class.

Markup:

<div class="container-fluid">
<form novalidate="novalidate" class="form-inline">
    <div class="col-md-6">
        <label class="col-sm-4 control-label" for="inputFirstName">First name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName">
        </div>
    </div>
    <div class="col-md-6">
        <label class="col-sm-4 control-label" for="inputLastName">Last name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName">
        </div>
    </div>

    <div class="col-md-12">
        <label class="col-sm-2 control-label" for="inputMiddleName">Middle Name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputMiddleName" ng-model="patient.middleName" placeholder="Middle name">
        </div>
    </div>
</form>
</div>

In order to obtain the space between first and second line, you can override bootstrap css by adding .col-md-12{margin-top:20px;}

Upvotes: 1

Related Questions