CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Musical Shore
Musical Shore

Reputation: 1381

Using Bootstrap, how do I position labels to the left of the input box when there are multiple inputs on the same row

I have a row with three inputs, two of the inputs have labels to their left. What is happening is the label is being displayed on top of the input box rather than to the side, like so:

enter image description here

Here is what I am trying to achieve: enter image description here

        <div class="row">
            <div data-bind="foreach: items" class="padding-left-lg">
                <div class="col-sm-4">
                    <input type="text" data-bind="value: Description,valueUpdate: 'afterkeydown'" class="form-control"/>
                </div>
                <div class="col-sm-4">
                    <label class="control-label">
                        Quantity: <input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
                    </label>
                </div>
                <div class="col-sm-1">
                    <input type="text" data-bind="value: Units,valueUpdate: 'afterkeydown'" class="form-control"/>
                </div>
            </div>
        </div>

Upvotes: 0

Views: 4932

Answers (2)

Omar Yafer
Omar Yafer

Reputation: 853

I would try something like this:

    <form class="row form-horizontal">
      <div class="col-sm-5">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
      </div> 


       <div class="col-sm-5">
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
              </div>
            </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
          </div>
        </div>
      </div>
     </form>

Here is the fiddle I made https://jsfiddle.net/g3e8yjyg/.

What is different from the default Bootstrap example? You treat your form as a row or a set of rows, and each formgroup becomes a cell, where you will only vary the value of the size. This will allow you to put many fields in a single row.

<form class="row">
    <!--Columns -->
    <div class="col-lg-*"> 
        <!--Your form group in here -->
          <div class="form-group">
            <!--The elements of you formgroup treated as col divs-->  
            <label for="inputPassword3" class="col-lg-*">Your label</label>
            <div class="col-lg-*">
              <input name="my-input">
            </div>
          </div>
    </div>
    <!--Columns -->
    <div class="col-lg-*"> 
        ...
    </div>
</form>

Upvotes: 2

Kyle Trauberman
Kyle Trauberman

Reputation: 25684

Add the form-inline class to your form, add the form-group class to the containing div, and move the input tag out of your label tag:

<form class="form-inline">
  <div class="form-group col-sm-4">
    <label class="control-label">Quantity:</label>
    <input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
  </div>
</div>

Upvotes: 1

Related Questions