How to position label and input in a stacked layout?

Question

I've defined a number of Bootstrap elements and want to position each label and input set in a stacked layout. At the moment the layout positioning forces the label to be positioned left of the corresponding control when the browser in maximized.

In order to re-position to a stacked layout I tried placing the label inside the same div as the input. I also tried setting the col-xs-1 property on the parent div mentioned here or increasing the col size which only pushes the label right covering the input instead of on top.

So the layout at present looks like this where my label is left aligned to the input:

Instead I'm aiming to position like this:

The window does resize to stack the labels when I reduce the size of my browser window, but when it's maximized the labels appear alongside.

Question:

Can someone explain how to stack sets of label and input controls in Bootstrap 3?

Sample of my layout:

<div class="container body-content">
  <div class="page-header">
    <div class="form-group">
      <fieldset>
        <form action="" id="createForm" class=
        "form-group has-feedback" method="post">
          <div class="form-horizontal">
            <div class="col-lg-12">

              <div class="form-group">
                <label class="col-md-1 control-label" for=
                "Application">Application</label>
                <div class="col-md-4">
                  <input id="ApplicationID" name="Application"
                  required="required" type="text" class=
                  "form-control" />
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-1 control-label" for=
                "EscID">EM</label>
                <div class="col-md-4">
                  <input id="EscID" name="EM" type="text"
                  placeholder="(If Applicable)" class=
                  "form-control" />
                </div>

              </div>
            </div>

          </div>

        </form><!--END OF FORM ^^-->

      </fieldset>
    </div>
  </div>
</div>

Answer 1

The reason here is you have parent column of 12( col-lg-12 - right inside .form-horizontal) grid. Now the child columns you have is col-md-1 (for label) and col-md-4(for input). So they are suppose to be in same parent row having column size of 12(col-lg-12).

What you could do is as following:

• Give the label column of 9 and input column of 4(as it is). So in sum it exceeds 12. Which forces input to bring down(stacked as you want).
• But in giving label column of 9 your text would appear on right(far far away...), so don't forget to add CSS: text-align:left; to .control-label. Also this class .control-label must be selected by parent, so it won't effect any other similar class in your document.

UPDATE: Scenario -

Image 1:

Image 2:

Image 3:

.control-label { text-align: left !important; }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
  <div class="page-header">
    <div class="form-group">
      <fieldset>
        <form action="" id="createForm" class="form-group has-feedback" method="post">
          <div class="form-horizontal">
            <div class="col-lg-12">

              <div class="form-group">
                <label class="col-md-9 control-label" for="Application">Application</label>
                <div class="col-md-4">
                  <input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-9 control-label" for="EscID">EM</label>
                <div class="col-md-4">
                  <input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
                </div>

              </div>
            </div>

          </div>

        </form>
        <!--END OF FORM ^^-->

      </fieldset>
    </div>
  </div>
</div>

Answer 2

Just remove: The div with class="form-horizontal" (and it's closing tag)

Then remove your col-md-4, col-md-9 class references for the label and input tags.

Revised code: https://jsfiddle.net/4bnndd8b/3/

Edit: if you want your form only 4 cols at md and large adjust your : class="col-lg-12" reference... i.e. col-md-4 (md and larger will only be a 4 col form).

<div class="container body-content">
<div class="page-header">
<div class="form-group">
  <fieldset>
    <form action="" id="createForm" class=
    "form-group has-feedback" method="post">
        <div class="col-lg-12">

          <div class="form-group">
            <label class="control-label" for=
            "Application">Application</label>

            <div class="">
              <input id="ApplicationID" name="Application"
              required="required" type="text" class=
              "form-control" />
            </div>
          </div>

          <div class="form-group">
            <label class="control-label" for=
            "EscID">EM</label>
            <div class="">
              <input id="EscID" name="EM" type="text"
              placeholder="(If Applicable)" class=
              "form-control" />
            </div>

          </div>
        </div>


    </form><!--END OF FORM ^^-->

  </fieldset>
</div>

Answer 3

See the basic form on Bootstrap's website.

 <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>