CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Thuurke
Thuurke

Reputation: 141

combine input-group and form-groups in bootstrap 3 horizontal form

I made a jsfiddle with 3 input elements: http://jsfiddle.net/zb4dc/1/

As you can see they do not align well. How can this be done?

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
    <div class="controls">
      <div class="input-group">
        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputfield3" placeholder="Input     3">
  </div>
</form>

Upvotes: 14

Views: 49147

Answers (1)

Ranveer
Ranveer

Reputation: 6863

You just forgot a col-sm-10 in the second input field. Here's your corrected code:

<body>
    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
                <div class="col-sm-10 controls">
                    <div class="input-group">
                        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
                        <span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
                </div>
            </div>
        </form>
    </div>
</body>

Fiddle: http://jsfiddle.net/zb4dc/2/

Upvotes: 34

Related Questions