CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user908853
user908853

Reputation:

Form input and submit button not aligned

I have a simple form containing an input and a submit button. I use bootstrap for responsiveness. When the screen size is md I expect the input field to be aligned with the input as the label is set to col-md-2, the input to col-md-10 and the submit to col-md-10 with an offset of col-md-offset-2. The alignment does not happen the way I expected it to, any ideas why this is happening?

Update

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-md-2 control-label">Label</label>
        <div class="col-md-10">
          <input type="text" class="form-control" id="inputEmail3" name="name">
        </div>
    </div>

    <div class="form-group" style="height: 50px;">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-success">Done</button>
            </div>
        </div>
    </div>
</form>

See demo here

Upvotes: 0

Views: 1199

Answers (2)

Aibrean
Aibrean

Reputation: 6412

The issue is you have two form-groups encasing your submit button which shoves it off from the left just a hair.

http://jsfiddle.net/m2rcxdx2/4/

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-md-2 control-label">Label</label>
        <div class="col-md-10">
          <input type="text" class="form-control" id="inputEmail3" name="name">
        </div>
    </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-success">Done</button>
            </div>
        </div>
</form>

Upvotes: 1

ganders
ganders

Reputation: 7433

Is this what you're looking for?

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEmail3" name="name" />
        </div>
    </div>
    <div class="form-group" style="height: 50px;">
        <div class="col-md-offset-10 col-md-2">
            <input type="submit" class="btn btn-success" value="Submit"></input>
        </div>
    </div>
</form>

http://jsfiddle.net/f4u6g0zh/

Upvotes: 0

Related Questions