Input groups bigger than input in Bootstrap 3 using Jumbotron container

Question

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 bigge

Answer 1

I had the same issue with bootstrap 4. Then I realized my css had following setup for span tags:

 span {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: #0c5460;
        }

Hence all my spans were big. Once I removed it, all worked fine.

Answer 2

Instead of making the input bigger, make the span (input-group-addon) smaller. To do that, make its padding lower. So:

.input-group-addon {
    padding: 0px 6px;
}