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

The main problem of .input-group-addon size within .jumbotron is that it inherits font-size of .jumbotron.

Usually, people are trying to change height, min-height or padding etc.

However the cause of different size is that .input-group in .jumbotron inherits "font-size: 21px;"

You should change the font-size of .input-group NOT .input-group-addon like below.

.input-group { font-size: 14px !important; }