Input groups bigger than input in Bootstrap 3 using Jumbotron container

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; }

Looking at Bootstrap's doc as Adrift suggests, your original code looks perfectly valid. Adding the input-group-lg class is great if you want LARGE but if you don't, it's wrong. Using IE9 and running your code in both my own dev environment and Adrift's jsfiddle, it's working correctly (for me) with and without the input-group-lg class, except of course that with it it's rendered large. Perhaps a browser specific issue??

That said, I'm experiencing a similar problem trying to add a radio button at the front of a selectpicker. Oh well...

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/

Last night, I had exactly the same problem. None of the fixes mentioned above worked in my context. What finally did do the job was setting the margin to 0:

.input-group .form-control {
    margin: 0px !important;
}

Perhaps this helps someone with a similar problem!