2

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.

5
  • Have you checked the docs here?
    – U r s u s
    Nov 19, 2014 at 9:57
  • i have read the document but control-label and form-control have the fixed width. So even if i use the col-sm-4 classes i can not arrange the fields according to my requirement. Nov 19, 2014 at 10:07
  • From the link: "Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid."
    – U r s u s
    Nov 19, 2014 at 10:23
  • I have tried that. But in the doc the signin button and the form field are attached to each other. how to get the space between them. Which col css i should use(col-sm or col-md) with how many grids(col-sm-4 or col-md-4)? Nov 19, 2014 at 10:42
  • I'll post an answer with a bootply demo.
    – U r s u s
    Nov 19, 2014 at 10:47

2 Answers 2

1

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;}

6
  • here the first name input type field and the middle name input type fields are attached to each other. How can get the space between them. The middle name is aligned to first name. Nov 19, 2014 at 10:59
  • As I said you can override bootstrap css. check updated demo
    – U r s u s
    Nov 19, 2014 at 11:03
  • You have removed the form-group for div. and there is much space between the first name and last name fields. Can we reduce the space between the first name and last name fields. sure i can mark the answer. Nov 19, 2014 at 11:16
  • You need to play around with the column widths to get the perfect fit for your purpose.
    – U r s u s
    Nov 19, 2014 at 11:25
  • 1
    Please post the code from your Bootply into your answer. Shoudl Bootply delete your saved solution or cease to exist, your answer will be useless to anyone else in the future.
    – MattD
    Nov 19, 2014 at 14:16
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.