David Moreno García David Moreno García - 10 months ago 67
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 Source

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/