CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jeff W
Jeff W

Reputation: 259

Bootstrap 3 - Trouble Vertically Aligning Input Group Button and Form

Sort of a weird problem. I'm following this section exactly but having a little trouble. When the button is aligned to the left of the field they align perfectly but when the button is aligned to the right (which I think of as more natural for a "submit" type behavior) there is about 5-10px of padding on top of the button that I can't get rid of:

Demonstration of the problem

My code is below:

<div class="col-sm-7">
   <h3>Get the latest Amazon News first:</h3>
   <div class="input-group">
      <input type="text" class="form-control" placeholder="E-mail" />
      <span class="input-group-btn">
         <button class="btn btn-default btn-group" type="submit">Sign Up</button>
      </span>
   </div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
   <h3>Get Started Now:</h3>
   <a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>

I'm pretty confused why it would work on one side and not the other. Any help would be appreciated!

Upvotes: 1

Views: 5434

Answers (1)

KKS
KKS

Reputation: 3630

Something seems to be wrong if you have written any of your custom css. I just copied your html and created a pen using bootstrap cdn css hosted files. Check this pen/demo.

It's because somehow you are adding break tag i.e.
above and below of your button element. just remove those breaks.

Upvotes: 1

Related Questions