David Moreno García David Moreno García - 6 days ago 5
CSS Question

Input groups bigger than input in Bootstrap 3 using Jumbotron container

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.

Answer

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/