CODEWITHSUNDEEP
htmlcssformstwitter-bootstraptwitter-bootstrap-3
Ivan Bilan
Ivan Bilan

Reputation: 2439

Form element wrong alignment, bootstrap3

I have a problem with horizontal form in bootstrap3.

The alignment of label-button is fine as long as the label text is not too long. The alignment of label-checkbox is fine as long as the checkbox has some text after it.

Working example: enter image description here

 <form class="form-horizontal"> 
  <fieldset>
  <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 class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Download excel file.</label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
  <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <div class="checkbox-inline">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>

Now the alignment goes haywire when I add a longer label and don't include any text behind the check box:

enter image description here

<form class="form-horizontal"> 
  <fieldset>
  <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 class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Download excel file bdhjfjsdhbfjshdb sjdhfhjsdhfhjgsdb</label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
  <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <div class="checkbox-inline">
        <label>
          <input type="checkbox">
        </label>
      </div>
    </div>

You can clearly see the Sing In button going a bit higher than the label and the checkbox being a bit lower than the label.

I do not understand why this is happening and I need the second form to look normal. I hope someone can help me.

Upvotes: 1

Views: 153

Answers (2)

Chris Yongchu
Chris Yongchu

Reputation: 789

You can clearly see the Sing In button going a bit higher than the label

That's how it works by default because of the top padding defined in the <label>. Notice how the button is also a little above the label in the original image post.

http://getbootstrap.com/css/#checkboxes-and-radios

You're no longer inlining anything as you removed the Remember me text. So to align the elements correctly, use Bootstrap's checkbox class instead of checkbox-inline.

  <div class="col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox">
      </label>
    </div>
  </div>

Here's a fiddle for you to review. http://jsfiddle.net/h2bztdtt/2/

Upvotes: 1

Frank
Frank

Reputation: 114

It looks like you are close. I was unable to recreate the checkbox being out of line so check any CSS you may have written. I was able to get everything to line up by putting a margin of 7px on the top of the button.

Upvotes: 1

Related Questions