Input groups bigger than input in Bootstrap 3 using Jumbotron container

Issue

I’m experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigger than its input height.

Here you can find a JsFiddle and an screenshot with the problem:

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

Live example at http://jsfiddle.net/DTcHh/

Screenshot: enter image description here

How can I fix this problem? I’m looking for a Bootstrap solution but if that’s not possible would be nice if you could help me to fix it with CSS rules.

Solution

The bootstrap solution is to add the input-group-lg class on the containing <div> – as shown in the documentation, but you’ll notice the addon is still slightly larger than the input so you can just adjust the height of the <input> to match; I added 5 px:

http://jsfiddle.net/DTcHh/21/

Answered By – Adrift

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published